Demonstrating background-clip and background-origin

Example 1: background-clip

background-clip:
border-box;
background-clip:
padding-box;

In this example we have two small divs both, the first of which has background-clip set to border-box, the default, meaning the blue background extends to the outer edge of the border. In the second box, using padding-box clips the blue background to the outer edge of the padding (inner edge of the border), allowing the main background image to be partially seen.

Example 2: background-origin

background-origin:
padding-box;
background-origin:
border-box;
background-origin:
content-box;

When you position a background image, background-origin allows you to specify your starting point. The default padding-box positions the background image relative to the outer edge of the padding (inner edge of the border), whereas border-box positions the background image relative to the outer edge of the border. There is also the value content-box which, not surprisingly, positions the background image relative to the outer edge of the content (inner edge of the padding).

This page is part of an introduction to CSS3 backgrounds and borders.