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
  • 254 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PixelatedKarma

Dani AI

Generated

Short version: the property does exactly what said — it fixes the background for the element it’s applied to (not magically for the whole page) — and in real projects it’s almost always one of these causes: the rule is applied to the wrong element, another background rule later in the cascade (or a shorthand) overwrote your attachment, an ancestor transform/stacking context changed behavior, or the browser simply doesn’t support a viewport‑fixed background the way you expect. See the definition of background-attachment for the formal behavior. MDN: background-attachment. (developer.mozilla.org)

Quick checklist to debug (short actionable steps):

  • Inspect the computed styles in DevTools to see which element actually paints the visible background and whether background-attachment is present there.
  • Grep your CSS for background: shorthand declarations — a shorthand will reset individual background-* properties to their defaults unless you include them. If you use shorthand, include fixed in it or set background-attachment explicitly afterwards. [MDN: shorthand properties]. (developer.mozilla.org)
  • Check for transformed ancestors or positioning that can change how “fixed” is interpreted (transforms can create new containing blocks that affect fixed positioning). (stackoverflow.com)

If you want a bulletproof fallback (useful for tricky layouts or flaky browsers), place the image in a dedicated element that is positioned fixed behind the content (or use body::before), instead of relying on background-attachment. That isolates the behaviour from other background rules and cascade surprises.

Mobile note and final tip: mobile WebKit/Safari historically mishandles background-attachment: fixed (odd scaling or ignored fixedness), so serve a sensible fallback (remove fixed in small‑screen media queries or use the fixed element trick above). Check current support before relying on fixed backgrounds. [Can I Use: background-attachment: fixed] and WebKit bug reports. (caniuse.com)

Credit: good detective work by (computed styles check), and helpful reminders from and about where to apply properties and repeat behavior.

Recommended Answers

All 4 Replies

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.