Maybe I am missing something but I have checked and double checked and even triple checked my code and I can't figure out why background-attachment:fixed; isn't working!

The css code is:

#background {

For whatever strange reason the bg.png still wants to scroll with the window....HELP ME PLEASSSEE

7 Years
Discussion Span
Last Post by PixelatedKarma

I'm new to html/css so I'd have to see the markup to figure out why this wasn't working.

If you are giving your <body> element an id of #background, it should work, although there are a bunch of unnecessary properties included in your declaration.

If the main container div for your page has the id of #background, then it should also work.

But, if the id #background is applied to any other internal element the background image should scroll with the page, as that element scrolls with the container.

I also wonder why you give an id to a background image, and not just assign the property and value of that image to the element.


Well the reason its set is because of this: I have a background image and then I have a container with another background image - the container holds a gradient which is in .png format thus creating a fade effect.

I have done this a few times without any problems but for some reason this time its giving me issues.


No I want it to use repeat-x; and the reason I am doing it this way before anyone says differently is because it can save *alot* of bandwidth. For example instead of having one 1600 wide pixel background - I can make one 400 - repeat it and save 1-2 mbs of download from what my users need.

I finally found the issue last night at about 2am (hey I had a brain wave okay). Problem was I kept checking firebug on firefox (if any of you new(er) developers are not using firebug I would *reeally* recommend installing it on your development machine. I went into the css sheet and removed shorthand properties - this allowed me to see what the entire webpage was calling (stuff I had defined and stuff I had not). One of the divs which uses a background image; repeats; etc I had been lazy on and hadnt wrote a background-attachment; property. This automatically reverted to background-attachment:scroll;. So food for thought for everyone that reads this - ALWAYS ASSIGN PROPERTIES EVEN IF YOU DONT THINK YOU'LL NEED THEM.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.