Background Color
You can change the background color of HTML elements by using the background-color property:
p {
background-color: #87b38d;
}
You can also change the background of the whole document by using the body selector:
body {
background-color: yellow;
}
Background Image
You can set an image as the background using the background-image property, and setting its value to the url of the image:
body {
background-image: url(https://images.unsplash.com/photo-1520170008701-d3b4805853a4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80);
}
Background gradient
Finally, you can set a gradien background. To do this, you still need to use the background-image property, but with slightly different syntax:
body {
background-image: linear-gradient(to right, #BEFFC7, #496E5B)
}
As you can see, you can specify both the direction and the colors used in the gradient. The direction can either be written out in words (to right, to bottom, to bottom left, etc.), or using degrees (0deg, -45deg, 142 deg, etc.). When using degrees, 0deg is the same thing as "to top", 90deg is the same as "to right", and so on clockwise. It's also possible to add more colors - to do this, just list all of them separated by commas. Here's another example, using degrees for direction and three different colors:
body {
background-image: linear-gradient(-90deg, red, yellow, blue)
}