Background Fixed

Back to FAQ Home | Back to Tutorial Home

Background Fixed

In this short tutorial we are going to explore the way Background Fixed works.

A couple of people have asked the same question: "Why do my fixed background images show in IE6 but not in Mozilla or Opera7"

The answer of course is that IE6 has misread the specs again and does what you expect, but not what it's supposed to do.

Consider the following CSS code:

body {
background-color: #FFFCCC;
color:#000;
background-image: url(pmoblogod.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

This will place an image in the centre of the page, without repeating and the image will be fixed. That is to say that if the page is scrolled the image will not scroll with the page. It will always remain in the centre. A good effect and very useful.

(BTW The background colour is specified just in case the image link is broken then your design will get a background color even if the image is missing. Also specify a foreground colour when specifying a background colour otherwise you might end up with white text on a white background.)

Lets look at the actual page so far. Have a look in IE6 then have a look in Mozilla (or Opera7).

Here's what you should see in any of those browers: (It's the green centre image that we're interested in.)

The above code will render correctly in compliant browsers and also renders correctly in IE6. "Where's the problem then?" I hear you say.... Well the problem arises when the background image is fixed to another element apart from the body.

Remember this statement:

IE6 only interprets background fixed when applied to the body element. On all other elements it's use deviates from the specs.

Look at the following code:

You would think that the above code would place an image inside the outer div at horizontally left and vertically centred (background-position: left center;). Well so does IE6 and this is exactly what it does.

However the specs say that position fixed is relative to the viewport and not the element it is contained in. So in the above example the values "left center" will refer to left center of the body/html element and not relative to the element named outer.

So you may ask "Well if that's so, then why can't I see it in Mozilla or Opera7". The reason for this is that although the image is placed relative to the viewport, it will only show when the element it is placed in happens to be over the position where the image is placed.

So if your element is on the right of the page and the bg image has been placed on the left, then it will never show.

Have a look at the following example : First look at it in IE , then try it out in Mozilla or Opera7:

This is what you should see in IE6:

This is what you should see in Mozilla:

In the centre you will see the fixed background image that has been placed on the body element and is consistent with IE6 and Mozilla.

To the left you will see that the image has been placed left center in IE6 but in Mozilla it is cut off and placed at the bottom of the element. Now if you scroll the page the image will scroll with the page in IE6 but does not scroll in Mozilla and disappears off the screen.

Next Question "How do I get it to behave the same in mozilla". Simple just take out the fixed statement and use the default of scroll.

Here's an example.

In both browsers the output will now be the same and as expected:

As you can see the page is exactly the same in both browsers now. IE6 basically treats fixed as scroll except when used on the body element.

(Although this isn't quite true as things get more complicated if the element itself is set to scroll. IE6 will then fix the element in the centre of the element while content in the element will be allowed to scroll over it. The whole element and image will scroll with the page. However Mozilla and IE6 are both a little buggy in this respect and results may not be as expected so it's worth testing first - but I'll leave that up to you to experiment with).

Next we move on to an example that only works in Mozilla and Opera7,which is a shame as it's a good effect.

Back to Top

Background Fixed

Just for Fun

As a final example of how useful fixed positioning can be in compliant browers, take a look at the following page in Opera7 or mozilla:

here's what you should be seeing in Mozilla:

The background image has been placed in the background of all 4 elements (box1,2,3,4). It has been placed at center center which as you remember is the center of the body. Therefore the image will be placed in exactly the same place for all elements.

.box1 {
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-105px;
margin-top:-100px;
border:1px solid #000;
background:#FFFccc;
background-color: #FFFFFF;
background-image: url(pmoblogod.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.box2 {
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:5px;
margin-top:-100px;
border:1px solid #000;
background:#FFFccc;
background-color: #FFFFFF;
background-image: url(pmoblogod.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.box3 {
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-105px;
margin-top:5px;
border:1px solid #000;
background:#FFFccc;
background-color: #FFFFFF;
background-image: url(pmoblogod.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.box4 {
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:5px;
margin-top:5px;
border:1px solid #000;
background:#FFFccc;
background-color: #FFFFFF;
background-image: url(pmoblogod.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.box3 p,.box4 p{
position:absolute;
bottom:0;
}

The elements are placed so that a corner of the element intersects the position where the image has been placed. Remember the image will only show in that part of the element that is over the image. The effect is to show the image in the four corners of the box as though it had been spliced in an imaging package and placed accordingly.

Try scrolling the page and the image remains static while the boxes pass over the image. An interesting effect I'm sure you will agree.

It's a shame that IE6 can't replicate this design as you will see if you check in IE6 the elements have the whole image in each one.

Here's a scrrenshot:

Hope that's given you an insight into fixed background images.

Back to Top

Paul O'Brien www.pmob.co.uk