How to Change the Background Image of Div Using Javascript?

Sophia Al-Mansoor
Sophia Al-Mansoor
• • 4 min read

This Is My Code Function Call Function Chek_Mark(){ Var El= Document. getElementById("a"). Style. Background-Image; If (El. Url("Black-Wallpaper. Jpg")) { El...

How to Change the Background Image of Div Using Javascript?

this is my code

<div style="text-align:center;">
  <div class="ghor" id="a" onclick="chek_mark()"></div>
  function call
</div>
<script type="text/javascript">
  function chek_mark(){
   var el= document.getElementById("a").style.background-image;
   if (el.url("Black-Wallpaper.jpg"))  
   {
     el.url = "cross1.png";
    }
    else if(el.url("cross1.png"))
    {
      alert("<h1>This is working too.</h1>");
     }
   }
</script>

here I want to change the background image using if else condition

this is the style-sheet
.ghor //this is the div class
{
    background-image: url('Black-Wallpaper.jpg');
    background-size: cover;
    border-radius: 5px;
    height: 100px;
    width: 100px;
    box-shadow: 2px 5px 7px 7px white;
    /*background-color: black;*/
    display:inline-block; 
}

i want change the background image of the 'div' which class is 'ghor'

0

7 Answers

Try this:

document.getElementById('a').style.backgroundImage="url(images/img.jpg)"; // specify the image path here

Hope it helps!

try this one!

var el = document.getElementById("a").style.backgroundImage;
if(el == "url(Black-Wallpaper.jpg)") { // full value is provided
   el.style.backgroundImage = "url(/link/to_new_file.png)"; // change it
}
7

You can do it in following ways

STEP 1 

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

For changing background of BODY

document.body.style.backgroundImage=imageUrl  //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color

To change an element with ID

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor

for elements with same class

   var elements = document.getElementsByClassName("ClassName")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

Must Read

HTML

<body id="body">
</body>
Sophia Al-Mansoor

Sophia Al-Mansoor

Global Business & E-Commerce Reporter
Linkedin Twitter

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.