CSS3 background-origin property

 The function of the CSS3 background-origin property is to control the position setting of the background image. With the background-origin property of CSS3, the background image of the DIV block can be easily adjusted according to the outer border (border-box) and inner margin (padding-box). ) And content-box to locate, so that the traditional work of setting DIV background image position alignment can be quickly solved. Because the background-origin property is a newer function of CSS3 , some browsers only support the new version. For reference to CSS designers.

Common browsers' support for CSS3 background-origin property

Browser	Google Chrome	Mozilla FireFox	Apple Safari	Opera	Internet Explorer
Supported version	The latest version is supported	The latest version is supported	The latest version is supported	The latest version is supported	Support from IE9 and above

Then we continue to look at the syntax of background-origin and the example

CSS3 background-origin property syntax rules

background-origin: positioning setting method;

There are three optional positioning methods for the background-origin property of CSS3, which are organized as follows.

Three available settings

Positioning settings	Description
background-origin:border-box;	The background image is positioned according to the outer border.
background-origin:padding-box;	The background image is positioned according to the inner border, the default value.
background-origin:content-box;	The background image is positioned according to the text border.

To make each positioning effect obvious, it is best to have a thicker border setting. The following are divided into three different actual setting effects.

CSS3 background-origin property example 1. Use border-box positioning

<style>
#TextDiv1{
    border:10px #ddd dashed;
    width:330px;
    height:120px;
    padding:20px;
    background-image:url(背景圖片網址);
    background-repeat:no-repeat;
    background-origin:border-box;
}
</style>
<div id="TextDiv1"></div>

The actual effect of the example

Using the border-box positioning method will make the background image of the DIV block positioned against the outer border. We specially thicken the sample DIV border to 10px, and you can see that a part of the background image overlaps the DIV border. That is because of the background- The effect of origin:border-box forces the background image to be positioned in the outer border to be aligned.

Note: To use the background-origin attribute, you must also use the background-image and background-repeat attributes, and set the background-repeat attribute value to no-repeat in order to play the background-origin background image positioning effect.

CSS3 background-origin property example two, using padding-box positioning

<style>
#TextDiv2{
    border:10px #ddd dashed;
    width:330px;
    height:120px;
    padding:20px;
    background-image:url(背景圖片網址);
    background-repeat:no-repeat;
    background-origin:padding-box;
}
</style>
<div id="TextDiv2"></div>

The actual effect of the example

Example 2: Using the background-origin padding-box positioning will allow the background image to be positioned according to the inner border, that is, the background image will be aligned to the inside of the DIV border. Many people will mistakenly think that the padding-box positioning will be based on the DIV itself. the padding is set to change, in fact, will not, padding-box will only make the background image according DIV inside of the frame positioning, with the DIV thickness of the block border and change position. padding-box is the default value of the background-origin property.

CSS3 background-origin property example 3. Use content-box positioning

<style>
#TextDiv3{
    border:10px #ddd dashed;
    width:330px;
    height:120px;
    padding:20px;
    background-image:url(背景圖片網址);
    background-repeat:no-repeat;
    background-origin:content-box;
}
</style>
<div id="TextDiv3"></div>

The actual effect of the example

Example 3 uses the background-origin content-box positioning method. This setting will make the background image of the DIV block be positioned according to the "content frame". This positioning method is related to the padding setting of the DIV itself. The padding setting The more, the farther the background image will be from the DIV frame.

Note: The background-origin attribute is only valid when the background-attachment is set to scroll.