One of the most commonly asked questions in CSS is what’s the actual difference between background and background-color? Are these both properties the same or different?
The reason why most of the developers get confused is that both the properties can set the background color of an element. I mean if we use background: red; or background-color: red; both of these set the background color of an element to red. So, are these two the same or different?
Here is the answer to all of these questions.
The background is shorthand for several background properties like background-position, background-size, background-image, background-color, etc. While the background-color is an individual property that only sets the background color of an element.
The background is shorthand of the following 8 properties:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
If you omit any of the 8 properties’ values, the background property uses its default value.
This means when you set background: red;, you are actually setting background: red none 0% 0% auto repeat padding-box border-box scroll;. But other values remain ineffective because the background-image is set to none.
Therefore, the background: red; only sets the background color of an element to red.
So, either we set background: red; or background-color: red;, both do exactly the same tasks but both are different. One is a shorthand while another is an individual property that only and only sets the background color of the element.
Here is a working example:
Example:
.p1{
background: red;
}
.p2{
background-color: red;
}
background vs background-color which one should be preferred?
Now, As we have understood the actual difference between the background and background-color property. So, which one should we preffer to set the background color of an element?
Now you might say that we can use either of the two. No, you shouldn’t.
If you only want to set the background color of the element always prefer the background-color property, not the background.
This is because if you have previously set any background image on the element and you mistakenly use background to set the background color of the element, it will reset all the existing background properties.
Here is a working example which shows the exact difference:
Example:
.p1{
background-image: url(images/golden-star.png);
background-repeat: repeat;
background-color: red;
height: 200px;
}
.p2{
background-image: url(images/golden-star.png);
background-repeat: repeat;
background: red;
height: 200px;
}
In the above example, only the first paragraph will have a background image. No background image will be applicable on the second paragraph because the background: red; property will reset all the previously declared background properties to their default value.
Where can you prefer background over background-color?
Sometimes, you might want to reset all previously declared background properties. For example, an old website which has poor styling.
In such situations, instead of resetting each of the background properties individually, you could use the background property as a tool to give a fresh background to the element.
