CSS Background Shorthand
The CSS background shorthand property is used to define a background for an element. background-color, background-picture, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.
CSS background- Shorthand property
To shorten the code, it is additionally possible to specify all the background properties in a single property. This is known as a shorthand property.
Rather than 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:
body { background: #ffffff url("img_tree.png") no-repeat right top; }
When using the shorthand property the order for the property value is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It doesn’t make any difference in the event that one of the property values is missing, as long as different ones are in a specific order. Note that we don’t use the background-attachment property in the examples above, as it doesn’t have a value.
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) |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.