Positioning Backgrounds - WARNING, OBSOLETE TEST

Use this one instead.

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 only the content and padding areas of a box. However, according to section 8.5.3, borders are drawn on top of a box's background. This means the background color should be underneath the border, but not the background image.

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 identical to each other, that is, there should be two cats, perfectly centered in the middle of a box with double borders.

4. Background and Border

The background image should not go under the border, but the background-color should. Thus in the following case the background tiling should be flush with the inside of the dashed lines and the gaps between the thick black dashes should be filled with green.

Up to the Evil Tests Page.

Bugzilla: Bug 1998 (fixed)

Last updated in May 1999.