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

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)

Answer 2

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

Answer 3

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

Answer 4

They're both the same. There are multiple background selectors (i.e. background-color, background-image, background-position) and you can access them either through the simpler background selector or the more specific one. For example:

background: blue url(/myImage.jpg) no-repeat;

or

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;