Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Background Shorthand?
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.
___-color: #ffffff;3Order
Put the learning moves in the order that makes the concept easiest to apply.
To shorten the code, it is possible to specify all the background properties in one single property.
All CSS Background Properties
CSS background - Shorthand property
CSS background - Shorthand property
To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.
Instead of writing
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}You can use the shorthand property background :
Example
Formatted code
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Live preview
The background property is a shorthand property for the following properties:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
If some of the property values are missing, they will be set to their initial (default) values.
All CSS Background Properties
| Property | Description |
|---|---|
| background | Sets all the background properties in one declaration |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background-clip | Specifies the painting area of the background |
| background-color | Sets the background color of an element |
| background-image | Sets the background image for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |
| background-size | Specifies the size of the background image(s) |