CSS Background Origin
CSS background-origin Property
The CSS
background-origin property specifies where the background image is
positioned.
This property can have one of the following values:
-
padding-box- The background image starts from the top-left corner of the padding edge. This is default border-box- The background image starts from the top-left corner of the border edge-
content-box- The background image starts from the top-left corner of the content edge
Note: This property has no effect if the
background-attachment
property is set to "fixed".
The following example illustrates the
background-origin property:
Example
#div1 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
#div2 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#div3 {
border: 2px solid
black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Try it Yourself »
CSS Advanced Background Properties
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |
