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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.