In CSS, the background-image property is used to set the background image for single or multiple elements. In CSS, multiple properties can be used to set the background image. Some commonly used properties are stated below:
- background-size property is used to adjust the size of the background image.
- background-repeat property enables or disables the repetition of an image.
- Background-position specifies the position of an image.
This write-up will present a comprehensive overview of background-image property, where you will learn how to add a background image to a single element or entire body.
How to Add a Single Background Image in CSS
The background-image property is mostly used with the body element however it can be added to any specific element such as paragraphs, headings, div etc. to add the background image.
Example 1: The below-given piece of code will embed a background image on the whole body:
It will show the following output:
In the above-given example image was placed in the same folder with HTML file so, in the URL it takes only the image name with its extension as shown in the following snippet:
Now let’s move the image to some other folder let say “images”:
If the image is not there in the same directory than we have to specify the complete path of the image otherwise we wouldn’t get the desired results.
Example 2: Instead of providing the complete path this example will try to access the image with its name only:
The image is placed in the images. From the output it would be clear that if you didn’t specify the exact path you wouldn’t get the desired results as shown below:
Example 2: let’s consider an example where the image is present in the images folder while the HTML file is there in the Background-image folder. In such a case, we specify the complete path of the image as shown in the following snippet:
In the url first comes two dots “..” that states move back one directory then go to the “images” directory where image is placed and at the end image name will come with its extension like jgeg, png, etc. Now this program will generate the proper output with background image as shown below:
Similarly, the Background Image can be embedded with any Element like <p>, <h1>, etc.
How to Add Multiple Background Images in CSS
In CSS, multiple background images can be added to the same element by providing multiple URLs.
Example
The below-given code will add multiple images on the body element, moreover it will utilize a few more properties like background-repeat, background-size, etc. as shown below:
<head>
<title>Background Image CSS</title>
<style>
body{
color: gold;
background-image:url("linuxhint.jpeg"), url("blue.jpg");
background-size: 600px;
background-position: center;
background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
<h1>Background image</h1>
<p>Welcome to linuxhint.com</p>
</body>
</html>
The above code utilizes
- color property to set the gold color for the text,
- background-image added two images,
- background-size set the image’s size to 600px,
- background-position to align the image’s position to center,
- and finally the background-repeat takes “no-repeat” which means each image will be displayed only once.
As a result it will generate following output:
From the output, you can clearly see that the blue.jpg image is behind the linuxhint.jpeg image which means the URL you write first will appear on the top while the second image will be displayed on the back/behind.
Conclusion
background-image property sets the background image for single or multiple elements. In order to implement a background image simply specify the URL of the image in the background-image property.
This article presented a detailed overview of background-image property. Initially, it explains how to add a single background image in CSS. Afterward, this write up guided how to set more than one background images for an element.
