Did you find this useful?
Socialize it today.


CSS3 Positioning and Clipping Backgrounds

Wednesday, November 21, 2012

browser

CSS3 provides additional flexibility for working with background properties. These properties allow for much greater control of the target element's background. In this overview, we will be covering the background-origin and background-clip properties. At first, it may seem that these two properties provide the same results, but we will take a deeper look and show how these two properties complement each other.


The background-origin Property

The background-origin property is used to determine how the background-position of a background is determined. The background-origin property takes three different values, border-box, padding-box and content-box. You need to understand the CSS Box Model to understand how the background-origin property is used. The background-origin property is supported in Internet Explorer 9+, Firefox 4+, Opera, Chrome, and Safari 5+.


Your browser may support the background-origin property.

background-origin Syntax

The background-origin property specifies what the background-position property should be relative to. The default value is padding-box.


background-origin: padding-box|border-box|content-box;


ValueDescription
border-boxThe background image is positioned relative to the border box
padding-boxThe background image is positioned relative to the padding box
content-boxThe background image is positioned relative to the content box


Example

In the following three examples, you will notice that the background image uses is positioned relative to the background-origin value. A value of border-box places the background image up to the border of the element. A value of padding-box, places the image up to the just outside of the border edge, and the content-box places the image outside of the padding edge.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDiv {
  width: ##px /* Specify the width of your element */;
  height: ##px /* Specify the height of your element */;
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-origin: /* As defined by specific examples below */;
}
</style>
</head>
<body>

<div id="myDiv"></div>

</body>
</html>


background-origin: border-box

In this example, you will notice that the background is position up to the edge of the element, placed under the border.


background-origin:border-box

background-origin: padding-box

In this example, you will notice that the background is position up to the top, left edge of the border, but does is not positioned under the border. It is positioned under the padding area.


background-origin:border-box

background-origin: content-box

In this example, you will notice that the background is position up to the top, left edge of the padding box, but does is not positioned under the padding area. It is positioned under the content area.


background-origin:border-box


The background-clip Property

In order to understand clipping, you need to understand the term "painting area." Browsers paint the backgrounds onto the elements. The painting area is the box where that background will be painted. All backgrounds will be clipped to the box defined in that property. If the background image overflows the box, the image is clipped it at the box edges. The background-clip property is supported Internet Explorer 9+, Firefox 4+, Opera, and Chrome. As of this writing, Safari supports the -webkit-background-clip property.


Your browser may support the background-clip property.

Using background-clip with background-origin

When you apply the background-clip property, you are instructing the browser to paint the background inside that box, and if it overflows the box, to clip it at the box edges. Just as with the background-origin property, the background-clip property has three supported values: border-box, padding-box, and content-box. You use the background-origin property to position the background image, but you use the background-clip property to set the painting area.


background-clip Syntax

The background-clip property specifies the painting area of the background. The default value is border-box.


background-clip: border-box|padding-box|content-box;


ValueDescription
border-boxThe background is clipped to the border box
padding-boxThe background is clipped to the padding box
content-boxThe background is clipped to the content box


Example

The following examples will show how to use the background-origin and background-clip to position and clip the background color or image for the target element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDiv {
  width: ##px /* Specify the width of your element */;
  height: ##px /* Specify the height of your element */;
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-clip: /* As defined by specific examples below */;
  background-origin: /* As defined by specific examples below */;
}
</style>
</head>
<body>

<div id="myDiv"></div>

</body>
</html>


background-origin: border-box | background-clip: content-box

In this example, the background image is positioned within the border-box, but the image is clipped at the content-box. Take note of the portions of the image that have been clipped. You should also note that the background color has been clipped as well.

background-origin:border-box


The background-clip and background-origin properties are best used together so that you do not see unexpected results. Keep in mind that these two properties have different default values. The background-clip property defaults to border-box while the background-origin property defaults to the padding-box.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 Sergeys HTML5 CSS3 HTML CSS and JavaScript