I would like to have a fixed image as a background on my website. Using Firefox's Web Development Inspector it looks like I should place the image in #fullwrap division. When I make this change online using

<div id="fullwrap" style="background: url("../images/biogbg4.jpg") repeat fixed 0% 0% transparent ! important;"> it works just fine.

However when I try to add the same thing to the css file the image does not appear. The css code is
#fullwrap {background-image: url("../images/biogbg.jpg") fixed !important;}

Any assistance you can provide would be appreciated.
Thanks
Murray


}

Do you have a link for the site?

Thanks
Paul

The website is in initial stages of development as I wanted to get the customization done before starting to add content. Here is what I have so far
debrasmussen.angelshare.ca/

At the moment its saying the path to that image is wrong

The path for the css would place the image here

debrasmussen.angelshare.ca/templates/nebula/images/biogbg4.jpg

thanks I have moved the image to the proper location but still it does not show on the site. The problem seems to be in the template.css line 5067 - has a background image which is off white. When I set it to background: none in the inspector tool I see the image I want in the background when I change the code in the css file it is somehow being overwritten and reset to the background image.

Its not being overwritten its being overriden by the templates use of

!important

so the line needs to be

background: none !important;

thanks - I discovered I was changing the wrong file. I was altering the code in:

templates/nebula/css/template.css

rather than

templates/nebula/css/themes/speckled/template.css

It is now working as I wanted. Thanks for your help and quick response.

Murray

Hi Murray,

You need to add styling to the custom.css file rather than edit any core css files

If you do the changes risk being erased on the template being recompiled or updated

Cheers
Paul

That was the first thing I tried - adding the following code to the custom.css file but it was still picking up the !important code from the template.css file in the speckled style folder. It was only after changing the template.css file int eh speckled style folder did the background image appear.

#gradient {background: none;}
#gradient .zen-container {background: #ffffff;}
#grid1wrap .zen-container, #grid2wrap .zen-container, #grid3wrap .zen-container, #grid4wrap .zen-container, #grid5wrap .zen-container, #grid6wrap .zen-container, #mainWrap .zen-container, #bottomrow .zen-container, #gradient, .items-more, .headline, .subheading, .result-created, ul.simple li {
background: none; !important}

If it matches the specificity it should work as the custom.css file is the last css file in the template css files

Cheers

Looking at the custom file - I'd forgotten you'd provided a link you have

#grid1wrap .zen-container, #grid2wrap .zen-container, #grid3wrap .zen-container, #grid4wrap .zen-container, #grid5wrap .zen-container, #grid6wrap .zen-container, #mainWrap .zen-container, #bottomrow .zen-container, #gradient, .items-more, .headline, .subheading, .result-created, ul.simple li {
background: none;
}
#gradient {
background: none;
}

These both need !importants to match the existing template styling

Thanks it is the little things that cause the problems. Everything working fine now.
Thanks again for your help.
Murray

You're welcome

Cheers
Paul