What is Background Shorthand Property?
In CSS, the background shorthand attribute is employed to simultaneously define various background style properties like image, color, size, and repetition methods. It is not possible to specify individual properties within the background shorthand attribute. In such cases, all values revert to their default settings.
In basic terms, this feature is employed to reduce the length of our code or program while also enabling us to define all the background properties under a single property. This feature is referred to as the CSS shorthand property.
Syntax:
By utilizing the background shorthand property, we have the capability to write in the following manner:
body{
background: #ffffff url("example.png") no-repeat right-top;
}
Instead of writing this:
body{
background-color: #ffffff
background-image: url("example.png");
background-repeat: no-repeat;
background-position: right-top;
}
Eight background properties can be declared with the use of background shorthand property:
- Background-color: With the use of the background-color property, we can assign the background colors to the HTML elements.
- Background-image: Using the background-image property, we can add one or more images to the HTML element. We can also set several background images by separating the background URLs in CSS using a comma.
- Background-position: With the help of this property we can set the position of the images and gradient.
- Background-size: This property helps us to modify the size of the background image. We can set images to keep their original size, stretch them, or fit them in a specific area.
- Background-repeat: This property helps us to control how a background image will repeat vertically or horizontally. We can also choose the image to repeat.
- Background-attachment: This property indicates whether the position of a background image is fixed or it can move while we scroll through the web page.
- Background-origin: With the use of this property we can set how to show the CSS background: inside the border, inside the padding, or from one side to another side.
- Background- clip: This property helps us to set how much a background image can leave the padding or content of an element.
When utilizing it, there should be a minimum of one space character separating it. The background-size value needs to directly succeed the background-position value. Moreover, there should be a slash between the background position and background-size, like (top right/contain).
Possible values
Some possible values can we use in the background shorthand property in CSS:
- border-box is a default value. It helps us to set the background image or color to reach the outside edge of the border.
- The padding-box helps us to prevent the image color from overstepping the padding.
- We can apply the content-box on images or color only to the content of the specified element.
The Order of the Background Shorthand Property
When we use the background shorthand property, we need to follow some order of the property values that is:
- Background color
- Background image
- Background repeat
- Background attachment
- Background position
We have the freedom to utilize any mix of these attributes in nearly any sequence (though the sequence outlined in the specification is preferred). However, there is a caveat: if we omit specifying any background attribute, it will default to its initial value.
Multiple background
In CSS3, it offers assistance for utilizing multiple backgrounds that can stack on top of one another. Any attribute associated with the background has the ability to accept a list separated by commas.
Such as:
<!DOCTYPE html>
<html>
<head>
<title>CSS Multiple Backgrounds</title>
<style>
/* Define a class called `box` that sets the background of a box using the background shorthand property */
.box {
background: url('./images/image1.jpg') no-repeat top left, url('./images/image2.jpg') no-repeat bottom right;
background-size: 50% 50%, 50% 50%;
height: 100vh;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
Why do we use the background shorthand CSS?
Utilizing the background shorthand CSS property offers a more succinct and lucid approach to defining multiple background properties for an element. Rather than listing each property separately, they can all be defined simultaneously.
Here are several explanations for utilizing the CSS background shorthand property:
Conciseness
It aids in minimizing the volume of code we have to write and upkeep, thereby enhancing the readability and manageability of our CSS files.
Clarity
It also offers a concise and organized method to specify multiple background properties simultaneously, aiding in enhancing code clarity, particularly in collaborative settings or during code review sessions.
Performance
When we consolidate various background attributes into a unified declaration, there is a potential enhancement in performance as the browser only needs to parse a single property instead of multiple ones.
Ease of use
It further streamlines the task of defining numerous background characteristics by enabling us to declare them in a solitary line of code, simplifying the exploration of various combinations.
Overall, leveraging the background shorthand CSS property can streamline our CSS code, enhancing efficiency and optimizing both development and maintenance processes.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Shorthand Property</title>
<style>
/* Define a class called `box` that sets the background of a box using the background shorthand property */
.box {
background: #ffffff url('./images/among.png') no-repeat;
height: 200px;
background-size: contain;
}
</style>
</head>
<body>
<div class="box">Impostor</div>
</body>
</html>
Output: