background-origin

The background-origin is the CSS property which specifies position where the background image is painted: across the content of container area, inside the padding or inside the border. To use it you need to set background-image property.

Values of the background-origin property:

border-box | padding-box | content-box

The initial value is border-box.

If background-attachment has value fixed the background-origin is ignored.

CSS rules for the exemplary ‘div’ element:

div {
    box-sizing:content-box;
    width:200px;
    height:275px;
    border:50px solid rgba(0, 0 , 0, 0.7);
    padding:20px;
    background-color:#FFB7C5 ;
    background-image:url('../images/old-man-hel.jpg');
    background-repeat:no-repeat;
}

border-box

The background image is painted form the edge of the border of the container area.

background-origin:border-box;

padding-box

The background image is painted below the border of the container area but form the edge of the padding.

background-origin:padding-box;

content-box

The background image is painted below border and padding of the container area.

background-origin:content-box;

Related

Resources

Browser compatibility

background-origin

Internet Explorer
9.0
Firefox
4.0
Chrome
1.0
Safari
3.0
Opera
10.5
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works