Background extension 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 usually 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.

Each test is repeated three times, in the same "row":

1. Firstly in plain form.
2. Applying the CSS3 property background-clip with value padding-box, which makes the background limited to the padding area.
3. Applying the CSS3 property background-origin with value border-box, which makes the background-position using the border area as reference.

Moreover in the first and third columns the div does not have any assigned dimensions, in the second it has one. IE7-/Win behavior changes, since in the second case the div's hasLayout property is true. IE7-/Win doesn't honor the spec, in both cases. Without hasLayout the background-position uses the border edge as reference, as with background-origin: border-box (indeed the third column is rendered the same in IE7- like in modern browsers, thanks to background-origin). With hasLayout the background is limited to the padding area, as with background-clip: padding-box (indeed the second column is rendered the same in IE7- like in modern browsers, thanks to background-clip)

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 and the background-image repetition extend under the border in all modern browsers, including Firefox, Safari, Opera, IE8+. In IE7-/Win this only occurs in absence of hasLayout on the box with background (with hasLayout the background is confined to the padding area).

The extension can (in modern browsers including Firefox, Safari, Opera, IE9+) be controlled with background-clip. So, for example, the background-color and the background-image repetition stay within the padding area (do not extend under the border) in Firefox, Safari, Opera, IE9+ all with background-clip:padding-box, and this can also be obtained in IE7-/Win with hasLayout.

The top left of the background-image is at the outer padding edge in all modern browsers, including Firefox, Safari, Opera, IE8+. In IE7-/Win this only occurs in presence of hasLayout on the box with background (without hasLayout the top left of the background-image is at the outer border edge).

The top left (origin) of the background-image can (in modern browsers including Firefox, Safari, Opera, IE9+) be controlled with background-origin. So, for example, the top left (origin) of the background-image can be set at the outer border edge in Firefox, Safari, Opera, IE9+ all with background-origin:border-box, and this can also be obtained in IE7-/Win without hasLayout.

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

CSS tests home