I have been using CSS background properties for quite a few years and have only used what I have needed. There are some pretty cool things that can be done with backgrounds that I was not so familiar with. In this article I'll highlight some of these not so common options.

background-origin

The background-origin property specifies where the viewing area for backgrounds applied to a given container will start. The background origin is based off of the top left corner. This property will not be applied if background-attachment is fixed.

border-box

The viewing area for backgrounds will begin at the outside edges of the container and will be displayed on a layer beneath the container’s border if one is applied.

div {
    background-origin: border-box;
}

padding-box

The viewing area for backgrounds will begin at the outside edges of the padding if any is applied and will not be displayed below the border if one is applied.

div {
    background-origin: padding-box;
}

content-box

The viewing area for backgrounds will begin at the edges of the content within the container.

div {
    background-origin: content-box;
}

inherit

The viewing area will be set based on that of its nearest parent with background-origin set. If one is not set on a parent element the default is padding-box.

background-size

The background-size property specifies the size for background images applied to a given container.

length/percentage

The background-size can be given a height and width in any length value px, em, %, etc. Percentages will be based on the dimensions of the parent container. Negative length values will not be applied.

div {
    background-size: 80% 50%;
}

auto

If explicitly setting a height and width on the background-size alters the aspect ratio/proportions of the image you can avoid this by picking either height or width to set explicitly and then set the other to auto.

div {
    background-size: 80% auto;
}

cover

The cover property will set the size of the image, maintaining its proportions, to be as small as it can be while both of its dimensions are greater than or equal to the dimensions of its container. When using cover there will be no area of the container that does not have the background image applied.

div {
    background-size: cover;
}

contain

The contain property is the opposite of the cover property. It will set the size of the image, maintaining its proportions, to be as large as it can be while both of its dimensions are less than or equal to the dimensions of its container.

div {
    background-size: contain;
}

background-clip

The background-clip property specifies the viewing area for backgrounds applied to a given container.

border-box

The viewing area for backgrounds will go to the outside edges of the container and will be displayed on a layer beneath the container’s border if one is applied.

div {
    background-clip: border-box;
}

padding-box

The viewing area for backgrounds will go to the outside edges of the padding if any is applied and will not be displayed below the border if one is applied.

div {
    background-clip: padding-box;
}

content-box

The viewing area for backgrounds will go to the edges of the content within the container.

div {
    background-clip: content-box;
}

inherit

The viewing area will be set based on that of its nearest parent with background-clip set. If one is not set on a parent element the default is border-box.

Browser Support

These CSS background-image options have pretty good browser support working in the latest versions of all modern browsers. Not supported in ie8 and below.

Sources

• https://developer.mozilla.org/en-US/docs/Web/CSS/background

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

• http://www.css3.info/preview/background-origin-and-background-clip

• http://www.css3.info/preview/background-size