Background Shorthand
CSS background - Shorthand property
It is also feasible to specify all background properties in a single property, which would shorten the code. We refer to this as a shortcut property.
Rather than penning:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Background is a shorthand property that you can use:
Example
To set the background properties in a single declaration, use the shorthand property:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
As long as the other property values are in this order, it makes no difference if one is absent. It should be noted that the background-attachment property is not used in the aforementioned examples because it is null.
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) |
