css - What is the difference between background and background-color

ID : 10060

viewed : 33

Tags : cssbackgroundbackground-colorcss

Top 5 Answer for css - What is the difference between background and background-color

vote vote

90

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

vote vote

84

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.

vote vote

75

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

vote vote

67

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)

vote vote

56

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/

Top 3 video Explaining css - What is the difference between background and background-color

Related QUESTION?