IE and background-attachment:fixed on non-body elements
MatthewHSE
Status: Contributor
Joined: 20 Jul 2004
Posts: 122
Location: Central Illinois, typically glued to a computer screen
Reply Quote
I've had good success with using
:: Code ::
background-attachment: fixed
on the <body> element, but now that I need to use it on a regular <div>, IE is giving me problems. It's scrolling the background instead of keeping it fixed on the page. IE supposedly supports this property since version 4.0, but I sure can't make it work.

Any ideas?

Thanks,

Matthew
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
You're right, what can I say, it doesn't work on IE.

Here's a test page for this MSIE background attachment bug. Works fine in Firefox (of course, it always does...), works perfect in Opera. But not in MSIE. Gee, are we surprised? No. Do we expect better from the forthcoming MSIE 7? Personally, no. But it would be nice to be pleasantly surprised.

A browser correctly displaying the CSS would show the left ball, which is in an image tag, scrolling as you scroll the page, and the two right balls fixed. It would also show the return link in a small yellow block, also fixed, with a margin.

As you can see, in MSIE the top body positioned ball is fixed, and the div centered ball isn't. I tried various combinations of positions on the div to see if it would make a difference, but it doesn't. MSIE only shows the top centered ball, rightmost as fixed.

:: Code ::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>background test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0;padding:0;
background: url(/images/test/ball1.gif) no-repeat fixed top;
}
div {
background: url(/images/test/ball1.gif) no-repeat fixed 180px 300px;
height:2000px;
}
</style>
</head>
<body>
<div>
<img src="/images/test/ball1.gif" width="200" height="200" alt="" />
</div>
</body>
</html>


If you want to run this at home, just add http//:techpatterns.com in front of each image url.

Just to be fair, since MSIE 5 and 6 are really getting pretty old, I tested this on Opera 6: worked. Then I decided to go way back, to Opera 5: worked. Then I tried Mozilla 1.0: worked. Then Netscape 6.2 [mozilla 0.9.2]: worked. Hmmm.

Oh well.

I added some more code to the sample page to show how MSIE 5x also doesn't support position:fixed at all, and also is unable to correctly apply width:auto to a span tag set to position:fixed.

Note also that MSIE appears to position the middle ball from the center, not the top like Opera and Firefox do.
Back to top
MatthewHSE
Status: Contributor
Joined: 20 Jul 2004
Posts: 122
Location: Central Illinois, typically glued to a computer screen
Reply Quote
So it doesn't work and there's no hack. Rats, I was hoping there'd be some kind of work-around for it.

I sure hope IE7 is better than its predecessors. Judging from the comments coming out of the Channel 9 wiki and a few screenshots I've seen, MS is working more on the interface (copying Firefox features) than anything else.

Too bad; the fixed background and position properties allow for some really neat design techniques. Guess it's back to using Dean Edwards' IE7 javascript for now.
Back to top
carbz
Status: New User - Welcome
Joined: 19 Nov 2005
Posts: 1
Reply Quote
hi, i just wanted to share my experience with you all.
first of all, i can't wait to the day when most browsers have some kind of reasonable standards! such a pain in the butt to always have to deal with each little bugs as a developer wanting his pages to be friendly with the popular broswers... sorry there i just had to share my pain lol ...

anyway, if it can help anyone... all i wanted was fixed background in IE and Mozilla :) so i've simply combined the following:

CSS part:
background-attachment:fixed

html part:
<body bgproperties="fixed">

as simple as this!
but still anoying when you have to put up with each little broswer differences
can you feel the rage? lol
Back to top
vkaryl
Status: Contributor
Joined: 31 Oct 2004
Posts: 273
Location: back of beyond - s. UT, closer to Vegas than SLC
Reply Quote
Depending on doctype of course, that inline css in the body dec won't validate....
Back to top
Display posts from previous:   

All times are GMT - 8 Hours