HTML | DOM Style backgroundImage Property
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
Please Login to comment...