Example

Position the background image behind the content:

div
{
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The background-origin property is only supported in Opera, Chrome, and Safari.


Definition and Usage

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

Note: If the background-attachment property for the background image is "fixed", this property has no effect.

Default value: padding-box
Inherited: no
Version: CSS3
JavaScript syntax: object.style.backgroundOrigin="content-box"


Syntax

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

Value Description
padding-box The background image is positioned within the padding box
border-box The background image is positioned within the border box
content-box The background image is positioned within the content box