CSS3 background-origin property with example

The "background-origin" property specifies the positioning area of the background images.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Firefox 3.6 and earlier does not support the background-origin property.

Safari 4 requires the prefix -webkit- to support the new background properties.

The background image can be placed within the content-box, padding-box, or border-box area.
Example for background-origin property..

/*Position the background image within the padding-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin: padding-box; /* Safari */
background-origin: padding-box;
}

/*Position the background image within the border-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:border-box; /* Safari */
background-origin:border-box;
}

/*Position the background image within the content-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 Other Background Properties..