Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which property is used to set the background image of an element using CSS?
In CSS, the ‘background-image’ property is used to set the background image of an element using CSS. The background-image property takes 4 different properties, as explained below.
Url () − It takes an image path or remote url to fetch the image from a particular location and set it as a background.
None − Users can use none as a value of the background-image property to remove the background.
Initial − It sets the initial background, which will be none in most cases.
Inherit − It sets the same background image as the parent elements.
Syntax
Users can follow the syntax below to use the ‘background-image’ property in css.
background-image: url('URL');
background-image: inherit;
background-image: initial;
background-image: none;
As shown in the above syntax, we can use the different values to set up the background image.
Example 1
In the example below, we have created the HTML div element and given the height and width using the CSS. Also, we have used the ‘background-image’ CSS property to set the background to the div element.
In the output, users can observe that it sets the background image repeatedly if the dimension of the div element is higher than the images.
<html>
<head>
<style>
.div-ele {
background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210922/pngtree-abstract-nature-green-and-sunny-defocused-light-background-image_906725.png');
height: 400px;
width: 500px;
font-size: 3rem;
color: black;
}
</style>
</head>
<body>
<h2>Setting up the background image using the <i> background-image </i> property</h2>
<div class = "div-ele">
This is a div.
This is a div.
This is a div.
This is a div.
</div>
</body>
</html >
Example 2
In the example below, we used the ‘initial’ as a background image value. In the output, users can observe that it doesn’t set any background for the div element, as the initial background was none.
<html>
<head>
<style>
.div-ele {
background-image: initial;
height: 300px;
width: 500px;
font-size: 2rem;
color: black;
border: 2px yellow solid;
}
</style>
</head>
<body>
<h3>Setting up the background image using the <i> background-image </i> property.</h3>
<div class = "div-ele"> Hi users, how are you? </div>
</body>
</html>
Example 3
In the example below, we have set the gradient and image together as a background. In the output, users can observe that the gradient is from top to bottom, and the content of the div element is above the gradient.
<html>
<head>
<style>
.div-ele {
background-image: linear-gradient(rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6)), url('https://www.tutorialspoint.com/css/images/css-mini-logo.jpg');
height: 300px;
width: 500px;
font-size: 4rem;
color: black;
border: 2px yellow solid;
}
</style>
</head>
<body>
<h2>Setting up the background image using the <i> background-image </i> property.</h2>
<div class = "div-ele">
Welcome to TutorialPoint's website!
</div>
</body>
</html>
Example 4
In the example below, we have set the two images as the div element's background. Also, we have set different background positions for both elements. In the output, users can observe that one image is at the bottom right and another is at the top left.
Whenever we use two background images together, the first image appears at the top of the second.
<html>
<head>
<style>
div {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmvLkYgy28lI-iZWZpd3aAz0mi25dpUNXnU6OUE2V&s"), url("https://media.istockphoto.com/id/1090883040/vector/twinkle-little-star.jpg?s=612x612&w=0&k=20&c=Z5csKM3_ccD2MWqeWn6XfBoCqUeGf1IJHN09hJhCQEM=");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 500px;
width: 500px;
font-size: 2rem;
color: white;
}
</style>
</head>
<body>
<h2>Setting up the multiple background images using the <i> background-image </i> property.</h2>
<div>
This div contains 2 background images.
The first one is at the right bottom, and the second one is at the left top position.
</div>
</body>
</html>
Users learned to use the ‘background-image’ property to set the image's background in this tutorial. Users also learned to set the gradient as a background of the HTML element. Users can also use multiple images as a background, and as they add URLs of images as a value, the background image will also appear in the same order creating a stack.
327 Views
