CSS3 background-origin Property

Here is the brief explanation on how to set the origin of the background image using the CSS3 background-image property.

Explanation

Property :

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

Where,
padding-box - Default value. The background image starts from the upper left corner of the padding edge
border-box - The background image starts from the upper left corner of the border
content-box - The background image starts from the upper left corner of the content
initial - Sets this property to its default value. Read about initial
inherit - Inherits this property from its parent element

Usage:

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

Definition:

The background-origin property specifies where the background image is positioned.

It takes the following values.

padding-box : Default value.
border-box : The background image starts from the upper left corner of the border.
content-box : The background image starts from the upper left corner of the content.

Example 1:

<div style='background: url(rose.png);
background-origin: content-box;
border: 5px solid black;
background-repeat: no-repeat;
padding: 35px;width:200px;height:50px;'>
This is an example for CSS3 background-size property.</div>

Result:

This is an example for CSS3 background-origin property.

Example 2:

<div style='background: url(rose.png);
background-origin: border-box;
border: 5px solid black;
background-repeat: no-repeat;
padding: 35px;width:200px;height:50px;'>
This is an example for CSS3 background-size property.</div>

Result:

This is an example for CSS3 background-origin property.

Example 3:

<div style='background: url(rose.png);
background-origin: padding-box;
border: 5px solid black;
background-repeat: no-repeat;
padding: 35px;width:200px;height:50px;'>
This is an example for CSS3 background-size property.</div>

Result:

This is an example for CSS3 background-origin property.

PreviousNext