Problem loading a customise background image into header section

@supportteambillyukco
8 years ago
44 posts

Hello:

We are using the 1-4-1 Flashback Skin.

If you have a look at our web site at billyukcmap.co.uk , You will see that most of our customise background images have loaded fine into our website but we seem to only have a problem loading a customise background image into that header section at the top of the site where you see the logo to the left and a banner to the right.

Below is the code in the Header CSS File that we are trying to edit:

/* @title Header */
/* @help This is the main header section for the site */
#header {
    max-width:1140px;
    max-height:118px;
    background: #0076A4; /* @ignore */
    background: -moz-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#108EB2), to(#0076A4)); /* @ignore */
    background: -webkit-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: -o-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: -ms-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: linear-gradient(#108EB2, #0076A4); /* @ignore */
    padding:10px;
    margin:0 auto;
    box-shadow: 0 0 4px #000 inset;

Below is the code to what we are trying edit and input into the Header CSS File section using the background image code

background-image: url('{$jrFlashback_img_url}/bukcmap_header_bg_150x150_Png_50.png');

Or Using Code

url('{$jrFlashback_img_url}/bukcmap_header_bg_150x150_Png_50.png');

.

We've put the background image code into various sections of this area but still the customise background Image will not load into the header section and every time we have tried which is about six times now, We have afterwards done the Reset Cache/Reset Image Cache and done the Integrity Check but still it will not load the customised background image into the header section.

It has now got to the stage where it's got very frustrating doing this and we have decided to come on here to see if somebody can resolve the issue for us as we have just about given up on it.

Thank You.
updated by @supportteambillyukco: 06/02/16 02:25:00PM

@michael
8 years ago
7,714 posts

The location you should be editing is:
/skins/jrFlashback/css/header.css around line 3

The code you have there has 2 background-image elements, you're only allowed one, so if you want to add

background-image: url('{$jrFlashback_img_url}/bukcmap_header_bg_150x150_Png_50.png');

then you'll need to replace the

background-image: -webkit-gradient(linear, left top, left bottom, from(#108EB2), to(#0076A4)); /* @ignore */

@supportteambillyukco
8 years ago
44 posts

michael:
The location you should be editing is:
/skins/jrFlashback/css/header.css around line 3

The code you have there has 2 background-image elements, you're only allowed one, so if you want to add

background-image: url('{$jrFlashback_img_url}/bukcmap_header_bg_150x150_Png_50.png');

then you'll need to replace the

background-image: -webkit-gradient(linear, left top, left bottom, from(#108EB2), to(#0076A4)); /* @ignore */

Hello Michael:

We've done what you said to do Michael and replace the code

background-image: -webkit-gradient(linear, left top, left bottom, from(#108EB2), to(#0076A4)); /* @ignore */

With the code

background-image: url('{$jrFlashback_img_url}/bukcmap_header_bg_150x150_Png_50.png');

And afterwards done the Reset Cache/Reset Image Cache and done the Integrity Check but sadly the problem is still there and the customise background image is still not loading into the header section ?.

@douglas
8 years ago
2,790 posts

Have you made any changes to the header.css via the ACP > Skins > YOURSKIN > Style tab?

The background-image is being ignored...

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 03/02/16 05:41:38AM

@supportteambillyukco
8 years ago
44 posts

douglas:
Have you made any changes to the header.css via the ACP > Skins > YOURSKIN > Style tab?

The background-image is being ignored...

Hello Douglas:

No Douglas, We've not done any changes or edit any setings in our ACP/Skin Setings/ In The Style Tab Area.

We are still lost on this Douglas and we just can't seem to resolve it to get it to work.

Thanks Douglas.

@michael
8 years ago
7,714 posts

Send us your details to support at jamroom dot net.

Need FTP login info and admin login info. Should be working. I'm guessing it could be a wrong skin setting issue. I'll take a look. put a link to this thread in the email so I know what its about.

@supportteambillyukco
8 years ago
44 posts

michael:
Send us your details to support at jamroom dot net.

Need FTP login info and admin login info. Should be working. I'm guessing it could be a wrong skin setting issue. I'll take a look. put a link to this thread in the email so I know what its about.

Hello Michael:

We have just now Michael send you the email with the details you requested and the subject of the email to look out for is :For the attention of Michael jamroom support:.

We would like to take this opportunity as well Michael to say, Thank you for your time and help to look into this for us to fix the problem and we very much appreciate this Michael.

@supportteambillyukco
8 years ago
44 posts

Absolutely brilliant Douglas And Michael. :-)

Thank you Douglas and Michael for resolving this issue for us.

The way you done it Douglas, Will definitely work for us and we are very happy with that and the way you have done it Douglas to fix the problem.

We are just very happy now that we can see that the image is now loading into the header because we were given up on it because it was getting very frustrating for us to get it to work.

We can't thank you enough Douglas and Michael and the jamroom support for the time you put into this and for resolving this issue for us and is very very much appreciated by us. :-)

updated by @supportteambillyukco: 03/03/16 11:59:14AM

@supportteambillyukco
8 years ago
44 posts

For future reference please use Douglas and Michaels solution below that helped us fix the problem in case someone else incurs this same issue regarding the flashback skin header CSS File in respect of loading a customise background image into the header section of your website.

Replace the below code in the flashback skin header CSS File:

/* @title Header */
/* @help This is the main header section for the site */
#header {
    max-width:1140px;
    max-height:118px;
    background: #0076A4; /* @ignore */
    background: -moz-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#108EB2), to(#0076A4)); /* @ignore */
    background: -webkit-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: -o-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: -ms-linear-gradient(#108EB2, #0076A4); /* @ignore */
    background: linear-gradient(#108EB2, #0076A4); /* @ignore */
    padding:10px;
    margin:0 auto;
    box-shadow: 0 0 4px #000 inset;

With the code you see below:

/* @title Header */
/* @help This is the main header section for the site */
#header {
    max-width:1140px;
    max-height:118px;
    background-image: url('{$jrFlashback_img_url}/yourbackroundimagename.png');
/*    background: #996633; /* @ignore */
/*    background: -moz-linear-gradient(#108EB2, #0076A4); /* @ignore */
/*    background: -webkit-linear-gradient(#108EB2, #0076A4); /* @ignore */
/*    background: -o-linear-gradient(#108EB2, #0076A4); /* @ignore */
/*    background: -ms-linear-gradient(#108EB2, #0076A4); /* @ignore */
/*    background: linear-gradient(#108EB2, #0076A4); /* @ignore */
    padding:10px;
    margin:0 auto;
    box-shadow: 0 0 4px #000 inset;

Again, A special thank you to Douglas and Michael for the above solution to fixing the issue.

@douglas
8 years ago
2,790 posts

Your welcome! And thanks for posting the solution here in the forums for others.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

solved Problem loading a customise background image into header section

Tags