Web Front-end
CSS Tutorial
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?
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
How to Use CSS Grid for Sticky Headers and Footers
Apr 02, 2025 pm 06:29 PM
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
