Fixed Backgrounds

Prerequisites

Browsers that are subjected to this test should support GIF images and the background properties of CSS. Support for the universal selector would be a good idea too (or at least correct error handling).

1. background-attachement:fixed

Is there a cat in the middle of the viewport? Yes? Ok, then check that this lovely cat is fixed. You can check this by scrolling the page up and down: If it is fixed the cat should stay where it is, and not follow the content.

If it is fixed, then scroll the navy DIV below under the cat. (The cat, by the way, is called Astrophy.)

   This
 
       is
 
         filler

               text

  to

    ensure

          that

              the

                 page

  is

    scrollable!

Here is the promised navy DIV:

When you scroll the DIV so that it is under the beautiful cat, you should see the cat's two cousins! (They are called Tipsy and Turvy!)

To make this clearer, let me point out that the navy bar should not have any cats as a background when the bar is not covering up the cartoon cat.

There now follows an explanation from David Baron as to how browsers could implement this behaviour.

1. Position and tile the background as if it were a background on the viewport.
2. Clip whatever the result is at the edges of the element whose background it actually is.

This means:

1. A tiled background image that is fixed shouldn't move around when the document is scrolled. The element whose background it is should "move over it".
2. A non-tiled background image should appear only when the (padding edge of the) element whose background it is, is over that part of the viewport.

   This
 
       is
 
         filler

               text

  to

    ensure

          that

              the

                 page

  is

    scrollable!

Cat drawing © copyright 1998 by Ian Hickson.

Submit Results

Up to the Evil Tests Page.

Bugzilla: Bug 1045

Last updated in January 1999.