Difference Between Background and Background-Color

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

CSS color vs. background-color vs. background?

color is referring to the text color in that element.

background-color refers to the background color

background is shorthand to combine many background tags into one line.

background: #ffffff url("img_tree.png") no-repeat right top;

Combines color, image and background image properties in the one line instead of typing our each style individually.

w3schools

what's the difference background-color and backgroundColor?

The CSS property is called background-color. This is what you should use in a stylesheet. You can also use uppercase letters because CSS is case-insensitive, but there needs to be an hyphen.

#element {
  background-color: red;
}

If you want to get or set that property using JavaScript, you can then use

element.style.getPropertyValue("background-color");
element.style.setProperty("background-color", "red");
element.style.setPropertyValue("background-color", "red");

However, it would be more convenient to be able to access it as a JS property. The problem is that the hyphen would be treated as a subtraction. To address that, the CSSStyleDeclaration interface is extended by partial interfaces in order to allow to get or set the values of supported CSS properties using IDL camel-case attributes.

That means you can also use

element.style.backgroundColor = "red";
element.style["backgroundColor"] = "red";

css difference between background: and background-image:

In a background property you can add background-color, repeat, no-repeat and other image attributes, but in the background-image property you are only allowed to add image.

background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

and in background property you can do in one line all these

background: #ccc url(paper.gif) no-repeat;

background or background color?

There's no difference about compatibility. The only difference is that using background you could add several properties in the same line, as you probably know, instead of repeating background-color, backgroud-image etc in different lines.

Background VS background-color: performance

Key points from the Github repository you've linked:

• None of this is super accurate.
• These are local page load times via file:/// URLs.
• Nothing is averaged. This is a single page load.
• The only platform tested is OS X (currently 10.9.1).
• I'm no developer tools expert (in any browser).
• Firefox's dev tools are horrible to use and I haven't included them in testing for now.

Unless you repeat the test thousands if not hundreds of thousands of times across different browsers (and their versions) and operating systems on a variety of different machines, the outcome is pretty meaningless. It could be completely coincidental that a correlation existed between the load times on the different browsers in one instance of testing.

Furthermore this is a very specific test. It tests Safari 7.0.1 and Chrome 33 on OS X. What about Safari 5.1, 6, 7.0.0? What about Chrome 4, 33, 44? What about Firefox, Opera and Internet Explorer? What about Windows or Linux? And what about mobile devices?

Your question isn't 'why is background faster than background-color', your question is 'why did one test run on OS X show background being faster than background-color on a specific version of two different browsers'. And that's a question which has countless possibilities.

Can we still use background-image and background-color together?

By default the background color is behind the background image, so if you specify one background, with a color and an image, the color will be invisible behind the image.

However, you can specify multiple backgrounds, each with their own properties. So one background can have an image, while another can have a color. And then the colored background can be over the image..

This is explained in detail in
https://css-tricks.com/tinted-images-multiple-backgrounds/

The trick is to specify a semi-transparent colored background, and a separate image background. You can specify them comma separated. In the code below, the first background is semi-transparent background. A normal rgba() color cannot be used as a background, but you can fake it by defining a linear gradient with two times the same color. The color values are the decimal RGB values for your color, and the fourth parameter specified an opacity of 50%.
The second background is the image itself.

.blue-pattern {
  background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    , url('/your image url');

In a full code sample it would look like this. Note that I've changes the url and skipped the other image properties.

.blue-pattern {  background:     linear-gradient(      rgba(64, 153, 255, 0.5),       rgba(64, 153, 255, 0.5)    )        ,   url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Portrait_of_Arthur_Conan_Doyle.jpg/460px-Portrait_of_Arthur_Conan_Doyle.jpg');    }
.pad--tiny {  height: 500px; /* for demo */ }

<div class="blue-pattern pad--tiny">    <p class="text--white">Blah blah blah, text and stuff</p>                                   </div>