Things You May Not Know About CSS Backgrounds

March 31, 2014 | 7 Minute Read

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

content-box

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

div {
    background-origin: content-box;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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%;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

content-box

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

div {
    background-clip: content-box;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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

ie9 and above Chrome 31 and above Fire Fox 26 and above Safari 7 and above

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