Background images in layers

  • This page exists to understand serious problems in Netscape 6 and Explorer 5 on Mac.
  • Doesn't work at all in Explorer 4 on Mac.
  • Cannot be tested in Safari because it doesn't support overflow: auto.
  • iCab seems to behalve as Mozilla.
  •  

    I wanted to use a fixed background in a layer. This works fine in Explorer on Windows, but both Netscape 6 and Explorer 5 on Mac have grave problems with this: it simply doesn't work properly.

    What I want to do is add a background image to a layer that has overflow: scroll, then fix the background image so that it does not react to scrolling.

    Unfortunately Netscape 6 and Explorer 5 act as if the image were fixed in the upper left corner of the entire window. This behaviour seems to be standards compatible, a fixed image should start at the top of the canvas (window).

    In other words, this is one of the cases where the specs themselves don't make sense. Why can't you give a layer a fixed background? There's no reason to disallow this. I firmly side with Microsoft's solutions of this issue.

    I call upon the Mozilla, Opera and Explorer Mac development team to ignore the standards in this particular case.

    The ComplexSpiral demo

    The most common reaction to this page is: "Eric Meyer's complexspiral demo is quite pretty and works according to the specs".

    This remark is of course true. Meyer has created a very interesting effect and has strictly adhered to the W3C standard in creating it (which means that it won't work in Explorer Windows).

    However, this does not prove anything. The issue on this page is not whether the W3C spec is workable (it is, and Meyer proves it) but whether it's logical. In my view it isn't.

    I could create a perfectly working copy of the ComplexSpiral according to the MS specs. Add a background image to the entire page, give the main content block some opacity and the demo works in all browsers that support opacity.

    So what does any ComplexSpiral demo, Meyer's original or my hypothetical copy, prove? Nothing. Both systems are proven to be workable, but in my opinion the Microsoft one is logical and the W3C one isn't.

    Test

    See the layers below. View them in any Explorer on Windows to understand how it should work. There's a background image that should remain fixed, even when the layer is scrolled.

    All test DIV's share these styles:

    div.test {
    	height: 150px;
    	overflow: auto;
    	width: 145px;
    	border: 1px solid #000000;
    	position: relative;
    
    	background-image: url('pix/bg_birthday.jpg');
    }
    

    I added background-attachment and background-repeat to some of them.

     

























    This one has no extra styles

    Desired effect: When the layer is scrolled far enough, the background repeats itself.

    Actual effect: as desired, except in Explorer 5 on Mac, where the background image doesn't scroll.

























    This one has background-attachment: fixed; as extra style

    Desired effect: The background does not react to the scrolling.

    Actual effect: Explorer on Windows does as desired, Opera doesn't show a background at all. In Netscape 6 and Explorer 5 on Mac the background is shown as if it were fixed in the upper left corner of the entire screen. (This is hard to explain in words, see it for yourself. You have to scroll the entire page, not the DIV). Although this behaviour is standards compatible it's the standards themselves that don't make sense here.

























    This one has background-repeat: no-repeat; as extra style

    Desired effect: When scrolling, the background scrolls up. After the end of the image has been reached, only the white background colour shows.

    Actual effect: Explorer on Windows does as desired, Opera shows the background. In Explorer 5 Mac the background behaves as if it's fixed. In Netscape 6 the background scrolls away but underneath it is a fixed version of the background!.

























    This one has both extra styles

    Desired effect: The background does not react to the scrolling.

    Actual effect: As desired in Explorer on Windows. Opera shows no background. Explorer on Mac and Netscape 6 show the same behaviour as with background-attachment: fixed; as only extra style, except that the background does not repeat itself. (If you see nothing, decrease the window height of your browser and scroll the entire page).

    Contents