To condense the code, it’s also feasible to consolidate all background properties into a single shorthand property. This is commonly referred to as a shorthand property for backgrounds.
In lieu of composing individual declarations:
| body { background-color: #ffffff; background-image: url(“img_tree.png”); background-repeat: no-repeat; background-position: right top; } |
You have the option to utilize the shorthand property background.
Example
Utilize the shorthand property to define all background properties within a single declaration.
|
body { |
When employing the shorthand property, adhere to the following order for property values:
Even if one property value is absent, maintain the sequence as specified. Notably, in the examples provided above, the background-attachment property is omitted, as it lacks a value.
|
Property |
Description |
|
background |
Configures all background properties in a single declaration |
|
background attachment |
Determines if a background image stays fixed or scrolls with the page. |
|
background clip |
Defines the area where the background will be painted. |
|
background color |
Applies a background color to an element. |
|
background image |
Applies a background image to an element |
|
background orgin |
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) |
