bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS Background Origin

CSS background-origin Property

The CSS

Formula

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

This property can have one of the following values:

Formula

padding - box
- The background image starts from the top - left corner of the padding edge.

This is default border-box

Formula

- 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:

Formula

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;
}

CSS Advanced Background Properties

Property

Description background

Formula

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)

Previous

CSS Background Size

Next

CSS Background Clip