Using Background vs. Background-Color in CSS, does it matter? (Yes)

One of the most common CSS questions I get is what’s the difference between background and background-color in CSS? The reason it’s confusing is that you often see developers using background-color and background interchangeably when they apply background color to an element.

But they’re not the same. The background (without -color) property can be used to set all the background properties for an element in one declaration. For example, you might want to add both a background color, an image that is displayed once (no-repeat), and an image position to an element in one single declaration, like this:

background: #444 url("image.jpg) no-repeat left top;

The above could also be written as such:

background-image: url(“url/image.jpg”);

background-repeat: no-repeat;

background-position-x: left;

background-position-y: top;

background-color: #444;

So the background property can be used as a convenient short-hand that can apply multiple declarations in one line, and save you many lines of code.

Declaration = CSS property + value.

The background-color property, on the other hand, can only set the background color of an element. It’s like a subset (a part) of the bigger background property.

Important: the background property will reset all previous declarations — be careful!

If you’ve previously applied various background declarations on an element, e.g. background-color or background-image, and then later on add a background: red declaration to the same element, all your previous declarations will be reset, and now your element’s background is red, and your background image is gone.

Example

Take a look at this Pen example, where we have three div elements with the same .box class. The first element only has the .box class but the others also have a utility (helper) class of .bg-red and .bg-blue respectively.

Se CodePen example.

Notice a difference?

The second box is all red, there’s no image, even though its .box class clearly specifies that it should have the same JS image as the two other elements.

The HTML

<div class="box">

</div>

<div class="box bg-red">

</div>

<div class="box bg-blue">

</div>

The CSS

.box {
	margin: 1rem;
	height: 100px;
	width: 150px;
	background-color: black;
	background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
	background-repeat: no-repeat;
}

.bg-red {
	background: red;
}

.bg-blue {
	background-color: blue;
}

Take a close look at the CSS, and compare the .bg-red and .bg-blue properties. The red class uses the 'master' (all-in-one) backgroundproperty to set the red color value, whereas the blue class uses the single-purpose background-color.

The background property on the .bg-red class simply removes every other background declaration on the second div element: here -image, -repeat, -color and then adds the specified red value as the single background attribute for that element.

So, if you only want to affect the background colors of specific elements, make sure you use background-color, not background or you will overwrite any previous background- declarations on that element.

Sometimes, resetting all previous declarations may be exactly what you want to do. You could be working on a website that has a bunch of legacy code that you’re not allowed to touch (or want to haha) but you want to manipulate a specific element that already has a bunch of declarations that you need to replace with a new singular declaration value, e.g. color — for that, using background is an excellent tool.