CSS3 Background-Origin Property

The CSS3 background-origin property specifies where the background image is positioned. The property takes three different values:

The following example illustrates the background-origin property:

HTML file: Displayed by browser:
<style>
#example1 {
    border: 10px solid black;
    padding:35px;
    background:url(../html_beg/images/img_flwr.png);
    background-repeat: no-repeat;
}
#example2 {
    border: 10px solid black;
    padding:35px;
    background:url(../html_beg/images/img_flwr.png);
    background-repeat: no-repeat;
    background-origin: border-box;
}
#example3 {
    border: 10px solid black;
    padding:35px;
    background:url(../html_beg/images/img_flwr.png);
    background-repeat: no-repeat;
    background-origin: content-box;
}
</style>
<body>
<div id="example1">
<h2>No Background-Origin (Default 'Padding-Box')</h2>
<p>No background-origin has been specified. So the default kicks in, which is called the padding-box. In padding-box, the background image starts from the upper left corner of the padding edge.</p>
<p>The padding edge is inside the border and is specified here to be 35px wide. The image looks kind of wedged into the upper left corner.</p>
</div>
<br />
<div id="example2">
<h2>Background-Origin: Border-Box</h2>
<p> The border-box specifies that the background image starts from the upper left corner of the border.</p>
<p>With a thick border like this 10px wide one, it looks like the top edge, as well as the left edge, are cut off, lost inside the border.</p>
</div>
<br />
<div id="example3">
<h2>Background-Origin: Content-Box</h2>
<p>With the content-box specification, the background image starts from the upper left corner of the content. If you have padding, the content is more away from the border and the image looks better positioned inside the container. </p>
<p>If you are not sure about the <a href="box.html" target="_blank">box model</a>, it might be wise to review it again.</p>
</div>
</body>

No Background-Origin (Default 'Padding-Box')

No background-origin has been specified. So the default kicks in, which is called the padding-box. In padding-box, the background image starts from the upper left corner of the padding edge.

The padding edge is inside the border and is specified here to be 35px wide. The image looks kind of wedged into the upper left corner.


Background-Origin: Border-Box

The border-box specifies that the background image starts from the upper left corner of the border.

With a thick border like this 10px wide one, it looks like the top edge, as well as the left edge, are cut off, lost inside the border.


Background-Origin: Content-Box

With the content-box specification, the background image starts from the upper left corner of the content. If you have padding, the content is more away from the border and the image looks better positioned inside the container.

If you are not sure about the box model, it might be wise to review it again.

Back button Table of Contents Next button