What is the difference between background-color, background-image and background in css?

Question

I'm having a hard time distinguishing between background-color, background-image and background when styling my css. Can someone tell me their differences and where to apply each.

Answer 1

background-color is a single colour to fill the background of your element. You can think of the color as something that might be behind the image since any background image will always overlap it.

background-image
The background-image is usually a png, jpg, or unanimated gif. The background-image might be transparent and show the background colour through it.

background includes the background-image and background-color. You could assign multiple background properties to 'background' in 1 key-value pair.

For example, background: url('mybackgroundImage.png') #000;
That will set the background-image and background-color. The web browser will assign accordingly since #000 is a colour and can't be assigned to an image property and vice versa for the url of an image.

There are many other background properties such as background-size, background-repeat...

The idea of assigning multiple properties in a line isn't unique to background. It applies to 'border' which includes border-color, border-style, border-top, border-bottom, border-radius...