CSS allows you to set backgrounds for elements using the background and background-color properties.
The css background-color property sets the background color for an element, and can be set to any valid CSS color value
<div style="background-color: red;">This element has a red background</div>
or
.sample-class {
background-color: #4CAF50;
}
<div class="sample-class">This element has a green background</div>
The background property is a shorthand property that allows you to set multiple background-related properties at once, including background-color, background-image, background-repeat, background-position, background-size, and background-attachment.
<div style="background: red url(image.jpg) no-repeat center center;"></div>
The above code sets the background color to red, and also sets the background image to be “image.jpg”, sets the image to not repeat, and centers the image both horizontally and vertically.
You can also set background-image with multiple values, like
background-image: url(first-image.jpg), url(second-image.jpg);
This sets the first-image.jpg as first layer of background and second-image.jpg as second layer of background.
You can also set different backgrounds for different sides of an element using the properties background-clip, background-origin, background-size and background-position.
