What is the difference between background and background-color
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
).
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.
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 seebackground: #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
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)