Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Background Origin?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: 2px solid black;3Order
Put the learning moves in the order that makes the concept easiest to apply.
The CSS background-origin property specifies where the background image is positioned.
CSS Advanced Background Properties
CSS background-origin Property
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
Formatted code
#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;
}Live preview
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) |