In this section, we will learn what the background property is and how to use it in CSS.
Click here to run the example of background property.
CSS background Property Definition and Usage
The background property is a shorthand property to declare values for other background related properties all in one declaration.
The properties that the `background` property supports are:
CSS background Property Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Note: between background-position and background-size it’s important to use a forward-slash ‘/’.
CSS background Property Value
As mentioned before, this property is a shorthand property to set the values for a set of background related properties. Hence, the values we could use for those properties can be used in this property as well.
Note: we don’t need to specify a value for each background related property in the `background`. Any property we leave out will be set to its default value.
The example above is equivalent to:
background: url(photos/music.jpg) left top / 100% repeat scroll border-box border-box transparent;
Note: the two global values “initial” and “inherit” can also be used.
Example: background property in CSS
See the Pen background property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.