The DOM Style backgroundImage Property is used to set or return the background image of an element.
Syntax:
- To get the backgroundImage property
object.style.backgroundImage
- To set the backgroundImage property
object.style.backgroundImage = "image | none | initial |
inherit"
Return Values: It returns a String, represents the background image.
Property Values:
- image: This sets the property to use the image specified. The image path may be specified in the url() function.
- none: This sets the property to use no background image.
- initial: This is used to set this property to its default value.
- inherit: This is used to inherit the property from its parent.
image: This sets the property to use the image specified. The image path may be specified in the url() function.
Example-1:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style backgroundImage Property</title>
<style>
.bg-img {
border: solid;
height: 180px;
width: 200px;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style backgroundImage Property</b>
<p class="bg-img"></p>
<button onclick="changeImage()">
Change source of background image</button>
<script>
function changeImage() {
elem = document.querySelector('.bg-img');
// Setting the backgroundImage to an url
elem.style.backgroundImage =
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
none: This sets the property to use no background image.
Example-2:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style backgroundImage Property</title>
<style>
.bg-img {
border: solid;
height: 180px;
width: 200px;
background-image:
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style backgroundImage Property</b>
<p class="bg-img"></p>
<button onclick="changeImage()">
Change source of background image
</button>
<script>
function changeImage() {
elem = document.querySelector('.bg-img');
// Setting the backgroundImage to none
elem.style.backgroundImage = "none";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
initial: This is used to set this property to its default value.
Example-3:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style backgroundImage Property</title>
<style>
.bg-img {
border: solid;
height: 180px;
width: 200px;
background-image:
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style backgroundImage Property</b>
<p class="bg-img"></p>
<button onclick="changeImage()">
Change source of background image
</button>
<script>
function changeImage() {
elem = document.querySelector('.bg-img');
// Setting the backgroundImage to initial
elem.style.backgroundImage = "initial";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
inherit: This is used to inherit the property from its parent.
Example-4:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style backgroundImage Property</title>
<style>
#parent {
border: solid;
height: 200px;
width: 300px;
background:
no-repeat;
background-size: cover;
}
.bg-img {
border: dashed;
height: 100px;
width: 100px;
background-size: cover;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style backgroundImage Property</b>
<div id="parent">
<p class="bg-img"></p>
</div>
<button onclick="changeImage()">
Change source of background image
</button>
<script>
function changeImage() {
elem = document.querySelector('.bg-img');
// Setting the backgroundImage to inherit
elem.style.backgroundImage = "inherit";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by backgroundImage Property are listed below:
- Chrome 1.0 and above
- Edge 12 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Aug, 2022
Like Article
Save Article