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-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:
This is the entire element including the border, padding and content.
The element just inside the border, including the padding and content.
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
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.
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
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
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.