Background origin property (background-origin)

The background-origin property controls the background positing area, which determines where the offset for background are calculated from.

Syntax:

selector {

background-origin: padding box;

}

Values:

The background-origin property has three main values, orientated according to the box model. These are:

padding-box - It is a default value position. The background is positioned relative to the padding box; or in other word it positions the background to the outer edge of the padding and also the inner edge of the border.
border-box - The background is positioned relative to the border box; or in other words it positions the background to the outer edge of the border depending on the width of your border, this change can be very subtle.
content-box - The background is positioned relative to the content box; or in other words it positions the background to the edge of the content, or the inner edge of the padding.
initial or inherit

NOTE: If the background-attachment property for the background image is "fixed", this property has no effect.

Example

Example with background-origin property set to the padding-box, border-box and content-box:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:70%; height:82px; margin-top:5px;
    background:url(../../../img/tutorials/css3-background-origin.png) no-repeat center right;
	color: #444; border: 4px solid #444;
  }
#padding-box {
    padding: 0 20 px;
    background-origin : padding-box;
}

#border-box  {
    padding:0 28px;
    background-origin: border-box;
}

#content-box {
    padding: 0 25px;
    background-origin: content-box;
}

</style></head>

<body>

<div id="padding-box"><strong>padding-box</strong></div>
<div id="border-box"><strong>border-box</strong></div>
<div id="content-box"><strong>content-box</strong></div>

</body>
</html>

›› go to examples ››

Background origin property (background-origin)

Syntax:

Values:

Example

Example with background-origin property set to the padding-box, border-box and content-box:

Comments

About

Contact

Get Connected