What is the difference between background and background-color

stanigator picture stanigator · Apr 18, 2012 · Viewed 128.7k times · Source

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

Fabrizio Calderan picture Fabrizio Calderan · Apr 18, 2012

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