You can use the CSS property, background-image to set background images for your HTML web pages.

This CSS property background-image sets one or many background images on a web page. By default, the images appear at the top left corner of the web page. You can use another CSS property, background-position, to position the background images differently.

The general syntax

Let’s learn about the general syntax of the CSS property, background-image.

background-image: value;

The CSS property, background-image accepts one or more URLs as a value. The word, URL stands for Uniform Resource Locator.

You can use the CSS function url() to pass the path for one or more images to this property.

A coding sample

Here comes an example to help you learn about uses of the CSS property, background-image

You can write or copy the below HTML source code in your index.html file

<!DOCTYPE html>
<html lang="en">

<head>
	<title> A Sample Web Page </title>
	<link rel="stylesheet" href="style.css"> </head>

<body>
	<div class="div1"> </div>
	<div class="div2"> </div>
</body>

</html>

Your CSS file, style.css should have below CSS source code

.div1 {
	border: 1px solid black;
	height: 50vh;
	background-image: url(photo-1.jpg);
	background-repeat: no-repeat;

}
.div2 {
	border: 1px solid black;
	height: 50vh;
	background-image: url(photo-1.jpg), url(photo-2.jpg);
	background-position: left bottom, right top;
	background-repeat: no-repeat, no-repeat;
}

The above example sets background images for two div elements with classes div1 and div2. It sets the height of two div elements as 50% of the total viewport height.

It sets a single background image for the div element with class div1.

It sets two background images for the other div element with class div2. The example uses the CSS property, background-position to position the images.

The CSS property, background-repeat property to ensure no repeat of background images. This prevents overlapping of images for the above example.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript