Understanding CSS background-color

background-color and background properties

You can use the background-color or the background property for any element, class, id, etc.

div {
	background-color: red;
}
.container {
	background: green;
}
#content {
	background-color: #7F53AC;
}

Gradient background color examples

Example #1

.example {
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
}

Example #2

.example {
background-color: #045de9;
background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
}

Example #3

.example {
background-color: #90d5ec;
background-image: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
}

Example #4

.example {
background-color: #42378f;
background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}

Background image and color together

Example #1 (background-color and an image top of that color)

.example {
background-color: #42378f;
background-image: url('bulb.jpg');
}

Example #2 (background image and color top of that image)

.example {
background:linear-gradient( rgba(#42378f, 0.8) 100% ), url('bulb.jpg');
}

You got a few clear examples. If you want to explore more, see background-image size CSS.