What is the difference between background and background-color

Question

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; }

Flyover

Answer 1

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).

Magnet

So background is just a shortcut for any of the 5 attributes? Hence not practical in real life if there are background position, color, and image? – Flyover

It's very practical, because you can specify all those attributes in one line. Refer to the Official Documentation – Buskin

there is A difference. i have a div with transparent gaps between its child elements when using background-color. but it is completely solid when i just use background. there is a verifiable difference in either their properties or behavior. – Avelar

Fwiw, from @ChristianVarga's link: The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet. Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration. Example given: P { background: url("chess.png") gray 50% repeat fixed } – Angular

More info at developer.mozilla.org/en-US/docs/Web/CSS/background – Phrygian

How about --background? – Genip

Answer 2

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.

Parthenos

This is a more complete answer, the reset part is very important difference. – Ulna

developer.mozilla.org/en-US/docs/Web/CSS/background -> As with all css shorthand properties, any omitted sub-values will be set to their initial value > background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent – Phrygian

Answer 3

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.

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

Connivent

Can you also say that all CSS shorthands are more preferreble due to the better performance? – Aircrewman

@LeventDivilioglu As tester said : These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusions-from-averages – Connivent

Answer 4

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)

Nettie

Answer 5

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/

Decalcify

Answer 6

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));

Avunculate

Answer 7

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”.

Rozalin

Answer 8

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.

Applause

Answer 9

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.

Sewn

Answer 10

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.

Syndicate

Answer 11

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

Neela

Answer 12

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.

Tonsorial

Answer 13

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

/*works*/
background: gray;

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

Bicker

Answer 14

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.

Whang

Answer 15

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") 

Spancel

Answer 16

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

Alsace

Sorry that doesnt make sense. Can you edit your answer to elaborate more on that? – Polysepalous