Home > Article > Web Front-end > Which property is used to set the background image of an element using CSS?
Which property is used to set the background image of an element using CSS?
- 王林forward
- 2023-09-05 10:21:031208browse
In CSS, the ‘background-image’ property is used to set the background image of an element using CSS. The background image property has 4 different properties as described below.
Url () - It takes an image path or remote URL to get the image from a specific location and set it as background.
None - The user can remove the background by using none as the value of the background image property.
Initial - It sets the initial background, in most cases there is no background.
Inheritance - It sets the same background image as the parent element.
grammar
Users can use the "background-image" attribute in CSS according to the following syntax.
background-image: url('URL');
background-image: inherit;
background-image: initial;
background-image: none;
As shown in the syntax above, we can use different values to set the background image.
Example 1
In the example below, we create an HTML div element and specify the height and width using CSS. Additionally, we have used the “background-image” CSS property to set the background of the div element.
In the output, the user can observe that if the size of the div element is higher than the image, it sets the background image repeatedly.
<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 use "initial" as the background image value. In the output, the user can observe that it is not setting any background for the div element because the initial background is not.
<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 set the gradient together with the image as the background. In the output, the user 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 set two images as the background of a div element. Additionally, we set different background positions for these two elements. In the output, the user can observe that one image is located in the lower right corner and the other image is located in the upper left corner.
Whenever we use two background images together, the first image will appear on top of the second image.
<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>
In this tutorial the user learned how to use the "background-image" property to set the background of an image. Users also learned to set gradients as backgrounds for HTML elements. Users can also use multiple images as a background, and when they add the URL of the image as a value, the background images will also appear in the same order in which the stack was created.
The above is the detailed content of Which property is used to set the background image of an element using CSS?. For more information, please follow other related articles on the PHP Chinese website!