1. Technology

Positioning and Clipping Background Images with CSS3

Learn to Use Two Style Properties: Background-Origin and Background-Clip


The different box areas in the CSS box model

The different box areas in the CSS box model

Courtesy J Kyrnin

With CSS1 and CSS2 you could add an image to the background of any element. But that was basically all you could do. Sure you could set the background to act like a watermark with the background-attachment property, and you could change the way the image tiled (or didn't tile) with the background-repeat property. But that is all the control you had until CSS3 came along.

With CSS3 you can layer multiple background images, clip the images, define where they should be positioned, and even change the size of the image. In this article, you will learn more about how to use the background-clip and background-origin properties to better control your background images.

What is a “Painting Area” and the “Positioning Area”?

In order to understand clipping, you need to understand the term “painting area.” Browsers are said to paint the backgrounds onto the elements. And the painting area is the the box where that background will be painted. There are three choices:

  • border-box
    This is the entire element including the border, padding and content.
  • padding-box
    The element just inside the border, including the padding and content.
  • content-box
    The element just inside the padding, including just the content.

The painting area is defined in the background-clip property, and all backgrounds will be clipped to the box defined in that property.

The positioning area is the same values as the painting area. Only, this tells the browser which box the positioning information should be applied from. The position is calculated from the top left corner of the positioning box defined in the background-origin property.

Understanding How the Clipping and Positioning Work

When you apply the background-clip property, you are telling the browser to paint the background inside that box, and if it overflows the box, to clip it at the box edges. So, as you can see in the background-clip examples, a background that is painted in the border-box will show up beneath the border. And a background that is painted on the content-box will only appear below the content, leaving the padding and border areas blank.

The background-origin property affects the positioning in a similar way. A background that is positioned at 0,0 with the origin of the border-box will start painting in the upper left corner underneath the border. While a background positioned at 10,30 with the origin in the content-box will start counting 10 pixels right and 30 pixels down from the edge of the padding, but it will not include the padding and border in the calculation.

For Best Results Use These Two Properties Together

The background-clip and background-origin properties are best used together so that you don't get surprising results. The first thing that most people forget is that they have different defaults. The background-clip property defaults to the border-box and the background-origin property defaults to the padding-box.

This may not seem like a big deal, but for example if you set the clipping to border-box and don't set the origin at all, the background will not display under the left and top borders in all cases because you've told the browser to not start painting the background until the inside of the border box (in the padding box). So if your background seems off, the first thing you should check is that it's painting from the origin you expect and clipping to the box you want.

©2014 About.com. All rights reserved.