Positioning Backgrounds

Browsers that are subjected to this test should support CSS1's box model properties and GIF images.

1. Border? Padding? Content?

According to the CSS2 spec, section 14.2.1, background-position specifies the position of a background image relative to the padding edge of a box, and tiling should cover the content, padding, and border areas of a box.

This page has the following styles:

   DIV.a { border: 10px red dotted; width:100px; height:100px;
           margin: 20px; padding: 20px;
           background: #222222 url(logo.jpg) top right no-repeat; }

The following is a DIV with a background in the upper right hand corner.

The image should be seemlessly fit against the top right hand corner of the border. If the browser is actually following CSS1 and not CSS2, then there may be a 20px padding area between the border and the image. This is a semantic difference between CSS1 and CSS2. Under no circumstances should the image be below the border.

Furthermore, the border should be a 10px dotted line. The two colours used should be dark gray and red:

dark gray

2. Position

A background positioned at (10px, 10px) should actually start at the eleventh pixel, leaving a 10px border. (Think of where a background positioned at (0px, 0px) should go.)

To really check this test, take a screen shot and count the pixels between the yellow lines below. There should be exactly 9px of pure purple between each yellow bar.

The following test should be absolutely identical, down to individual pixels. In this case, we are only repeating the image vertically, not horizontally.

The following test case only repeats horizontally, not vertically. Still, it should be identical to the other tests in this section.

And finally, in this test we do not repeat at all. Once again, the results should be identical to the other tests in this section.

Here is what the above should look like, first real-size and then scaled up by a factor of 10 (note that these are PNG files not GIFs):

[Sorry!] [Sorry!]

3. More Position

The background image should be placed with respect to the padding edge not the border edge. The following four test cases test this with each of the four repeat values (no-repeat, repeat-y, repeat-x, and repeat). The tests should look nearly identical to each other, that is, there should be two cats, perfectly centered in the middle of a box with double borders. The only difference between them is what appears under the borders. The second should also have traces of the cats above ond below, the third should have traces of the cats left and right, and the fourth one traces of the cats on all sides.

4. Background and Border

In the following case the background tiling should be everywhere, even in the gaps between the thick black dashes.

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Bugzilla: Bug 1998 (fixed)

Last updated in October 2003 to take into account CSS2.1 changes.