What is the difference between background and background-color

302
votes

What's the difference between specifying a background color using background and background-color?

Snippet #1

body { background-color: blue; }

Snippet #2

body { background: blue; }
17
cssbackgroundbackground-color

17 Answers

278
votes

Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shorthand for

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

Thus, besides the background-color, using the background shorthand you could also add one or more values without repeating any other background-* property more than once.

Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).

165
votes

background will supercede all previous background-color, background-image, etc. specifications. It's basically a shorthand, but a reset as well.

I will sometimes use it to overwrite previous background specifications in template customizations, where I would want the following:

background: white url(images/image1.jpg) top left repeat;

to be the following:

background: black;

So, all parameters (background-image, background-position, background-repeat) will reset to their default values.

92
votes

About CSS performance :

background vs background-color :

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

Background vs background-color

While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time.

That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same.

This honestly blew me away because for the longest time for two reasons:

  • I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road.
  • I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.

Ref : https://github.com/mdo/css-perf#background-vs-background-color

25
votes

With background you can set all background properties like:

  • background-color
  • background-image
  • background-repeat
  • background-position
    etc.

With background-color you can just specify the color of the background

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

More info

(See Caption: Background - Shorthand property)

8
votes

One of the difference:

If you use a image as background in this way:

background: url('Image Path') no-repeat;

then you cannot override it with "background-color" property.

But if you are using background to apply a color, it is same as background-color and can be overriden.

eg: http://jsfiddle.net/Z57Za/11/ and http://jsfiddle.net/Z57Za/12/

3
votes

There is no difference. Both will work in the same way.

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background property includes all of this properties and you can just write them in one line.

3
votes

They're both the same. There are multiple background selectors (i.e. background-color, background-image, background-position) and you can access them either through the simpler background selector or the more specific one. For example:

background: blue url(/myImage.jpg) no-repeat;

or

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
3
votes

The difference is that the background shorthand property sets several background-related properties. It sets them all, even if you only specify e.g. a color value, since then the other properties are set to their initial values, e.g. background-image to none.

This does not mean that it would always override any other settings for those properties. This depends on the cascade according to the usual, generally misunderstood rules.

In practice, the shorthand tends to be somewhat safer. It is a precaution (not complete, but useful) against accidentally getting some unexpected background properties, such as a background image, from another style sheet. Besides, it’s shorter. But you need to remember that it really means “set all background properties”.

2
votes

background is the shortcut for background-color and few other background related stuffs as below:

background-color
background-image
background-repeat
background-attachment
background-position

Read the statement below from W3C:

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

body {
  background: white url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order.

2
votes

I've found that you cannot set a gradient with background-color.

This works:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

This doesn't:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
1
votes

This is the best answer. Shorthand (background) is for reset and DRY (combine with longhand).

1
votes

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

I recreated the CSS performance experiment and the results are significantly different nowadays.

background

Chrome 54: 443 (µs/div)

Firefox 49: 162 (µs/div)

Edge 10: 56 (µs/div)

background-color

Chrome 54: 449 (µs/div)

Firefox 49: 171 (µs/div)

Edge 10: 58 (µs/div)

As you see - there's almost no difference.

1
votes

background is shorthand property for the following: 

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

You can detailed info on every property here

Properties order

In most of browser implementation (i think maybe older browser could present issues) the order of the properties does not matter, except for:

  • background-origin and background-clip: when both of this properties are present, the first one refer to -origin and the second to -clip.

    Example:

    background: content-box green padding-box;

    Is equivalent to: 

    background-origin: content-box;
background-color: green;
background-clip: padding-box;

  • background-size must always follow background-position and the properties must be separated by /

  • if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.

0
votes

I've noticed when generating emails for Outlook...

/*works*/
background: gray;

/*does not work*/
background-color: gray;
0
votes

You can do some pretty neat stuff once you understand that you can play with inheritance with this. However first let's understand something from this doc on background:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

So when one do:

background: red;

He is setting the background-color to red because red is the last value listed.

When one do:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Red is the background color once again BUT you will see a gradient.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }
    <div class="box">
      
     </div>

Now the same thing with background-color:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }
    <div class="box">
      
     </div>

The reason this happens is because when we are doing this :

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

The last number sets the background-color.

Then in the before we are inheriting from background (then we get the gradient) or background color, then we get red.

-2
votes

One thing I've noticed that I don't see in the documentation is using background: url("image.png")

short hand like above if the image is not found it sends a 302 code instead of being ignored like it is if you use 

background-image: url("image.png")
-2
votes

There's a bug regarding with background and background-color

the difference of this, when using background, sometimes when your creating a webpage in CSS background: #fff // can over ride a block of Mask image("top item, text or image")) so its better to always use background-color for safe use, in your design if its individual