Background and Border

According to CSS2.1 14.2:

• "background" refers to the background of the content, padding and border areas.
• "background-position" uses the padding edge of the element as reference.

The above means, for example, that:

• a background color should extend under the border area of the element and be visible when the border has some transparent parts (which is probably the case when border style is dotted, dashed, double)
• a background image with "background-position: 0 0" should start at the padding edge of the element (but then, if "repeated", it should extend also under the border.)

In the following test cases a (100px × 100px square) div with 10px dotted brown border has various combinations of backgrounds, and it is wrapped in a box with a light blue grid background.

In the first column the div does not have any assigned dimensions, in the second it has one (IE/Win behavior changes, since in the second case the div's hasLayout property is true.) In the second column the div also has -moz-background-clip:padding, and background-clip:padding.

The (100px × 100px) image used as background in the tests (the zone between red and black is transparent)

The test element without any background applied to it:

Test cases

yellow background-color

no background-color, image no-repeat

yellow background-color, image no-repeat

no background-color, image repeat

no background-color, image no-repeat, position 10px 10px

no background-color, image no-repeat, position -10px -10px

no background-color, image no-repeat, position 20px 20px

Results

The background-color extends under the border in:

• Moz
• Op6+
• Saf
• IE5/Mac
• IE/Win without hasLayout

The background-color does not extend under the border in:

• IE/Win with hasLayout
• Moz with -moz-background-clip: padding

The top left of the background-image is at the outer padding edge in:

• Moz
• Op6+
• Saf
• IE/Win with hasLayout

The top left of the background-image is at the outer border edge in:

• IE5/Mac
• IE/Win without hasLayout

The background-image repetition extends under the border in:

• Moz
• IE5/Mac
• Saf
• Op7.5+
• IE/Win without hasLayout

The background-image repetition does not extend under the border in:

• Op6
• IE/Win with hasLayout
• Moz with -moz-background-clip: padding

Changing background-position it is possible to have a not repeated background-image under the border in most browsers.
(Saf and older versions of Op7 have bugs.)

Other similar background, border and hasLayout tests just for IE/Win.

CSS tests home