Definition:
CSS background-image property is used to set a background image in an element or entire web page’s background.
Property Values are:
background-image:
url("");
Syntax:
background-image: url("my-background-image.png");
let’s use the following image to set as a background. You can use any images you like but keep in mind that the image you use should match your sites or elements. Otherwise, it might rank your site as poor quality. The following image I took is just to show an example of how background-image works?
Let’s have a look in detail.
Here is the image I am going to use.

1) url(” “);
<!DOCTYPE html>
<html>
<head>
<style>
#background-image
{
background-image: url("http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg");
color:white;
}
</style>
</head>
<body id="background-image">
<div>
<h2>Here is an example of background-image. See this image how the above background image is used in this element.</h2>
</div>
<div>
<h2>I have used the background image in whole webpage body. You can use it anywhere you like. If you want to use on single element as well.</h2>
</div>
</body>
</html>
Result:

I took the screenshot of the background-image to show you because I have applied background-image in the body part which changes my entire site’s background image. I don’t want this. This background image is not suitable for my site. That’s why I have already mentioned to you that you have only used your background image that matches your site and looks professional. If the background image doesn’t look nice on your site, it is better you use a white background.
Keep in mind. Background-image can also use different elements as well as in buttons, layouts, or other areas.
Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)