
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.