What is the difference between background and back

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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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/