Member Avatar for PixelatedKarma

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 {
        height:100%;
	min-height:100%;
	width:100%;
	margin:0px; 
	padding:0px; 
	border:0px;
	background-image:url(../images/bg.png);
	background-repeat:repeat-x;
	background-attachment:fixed;
	background-position:top;
}

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

  • 3 Contributors
  • 4 Replies
  • 225 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PixelatedKarma
Member Avatar for tinimic

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.

Member Avatar for PixelatedKarma

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.

Member Avatar for karol33

check no-repeat instead background-repeat:repeat-x;

Member Avatar for PixelatedKarma

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.