Fixed in Mozilla, Scrollable in IE

The Idea

The main idea for this one came when I visited Eric A. Meyer's "CSS Edge" and saw that he did some hacking to adjust display of background images in IE 5.x. Before you proceed, please take a look at Comlexspiral Demo. However, at that time he had no alternative for IE 6.0, so I took some time and discovered some irregularities against (again) IE 6.0. What I'm trying to do here is fixed background image in Mozilla and scrollable background image in IE 6.0, but still to look fine in IE 6.0...

Some Theory

CSS value !important is used when we want a specific CSS property to override contradictory properties of otherwise equal weight. It is also used for overriding some customized user's CSS. This should be otherwise working well, but, huh... not in IE 6.0.

Another CSS rule says that when two properties have the same weight, the last property specified wins, and that rule IE 6.0 blindly follows. What a luck for us!

The main idea here is to create background property and to set it to be more !important than another background property which I'll place right in the next line. So it looks something like this:

background: color image repeat attachment position !important;
background: color image repeat attachment position;

Opera 7.10, Mozilla 1.4 and Netscape 7 should read both lines, but execute only the first line because it's more important than the second line. On the other hand, IE 6.0 will follow the rule "The last time you see some property selector, don't you ever go back to check if something is more important!" and will execute the second line. Okay, let's do some work, people!

An Action

All we need to create this appearance is setting alternative background properties for: body, content and links. In this case I set plain color instead of alternative image for links in IE 6.0, because it would be too much of "every-link-has-its'-own-id" which is of course, non-sense. Nevertheless, if you want to try this for links also, I'm not the one to blame for your nerve brakedown : )... Here it goes (only part of the code related to background property is displayed):

body {
background: #8C9EBC url(bobi.jpg) no-repeat fixed 0 0 !important;
background: #8C9EBC url(bobi.jpg) no-repeat scroll 0 0;
}
#content {
background: #C0C0C0 url(bobi_light.jpg) no-repeat fixed  0 0 !important;
background: #C0C0C0 url(bobi_light.jpg) no-repeat  -165px -34px;
}
#navbar li a {
background: transparent url(bobi_light.jpg) no-repeat fixed  0 0 !important;
background: transparent;
}
#navbar li a:hover {
background: #C8D1E0 url(bobi_light.jpg) no-repeat fixed  0 0 !important;
background: #C8D1E0;
}

Since IE supports only scrollable backgrounds in elements other than body, I set it to scroll even for the body, so when moving your scrollbar up or down, both images - "dark" and "light" - will be stiched to each other and will move synchronously.

In #content section I might set another "light" image cut from the left for 165px and from the top for 34px, but then you have one more .JPG to load, which is unacceptable. In #navbar li a and #navbar li a:hover section there's only background-color defined, but in the form of general background property. If I did it only by background-color, the rest of background values would still remain in function.

Credits & Technicals

Thanks to Eric A. Meyer for made me think about this. I've tested this page in Mozilla 1.4, Opera 7.10, Netscape 7, IE 5.5, IE 6.0, but anyway please, do report bugs in whichever Browser/OS.

Run xhtml or css validation.