how to change the background image of div using javascript?

Question

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'

how can this line var el= document.getElementById("a").style.background-image; work? There's a minus sign in a property... I should have thought it would have to be var el= document.getElementById("a").style.backgroundImage; — MDickten
– MDickten, Commented Apr 12, 2023 at 11:07

immayankmodi · Accepted Answer · 2014-02-01 10:35:44Z

91

Try this:

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

Hope it helps!

edited Feb 1, 2014 at 10:35

answered Feb 1, 2014 at 10:33

immayankmodi

8,63010 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andilabs Over a year ago

any chance to manipulate referere here?

user3870075 Nov 28, 2024 at 10:39

if you add semicolon at the end like this document.getElementById('a').style.backgroundImage="url(images/img.jpg);"; it will not work

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-02-01 10:40:17Z

5

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
}

edited Feb 1, 2014 at 10:40

answered Feb 1, 2014 at 10:35

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

7 Comments

Avisari Over a year ago

Will this only get the filename, or will it also get the path?

Afzaal Ahmad Zeeshan Over a year ago

@Avisari, it will get the value of the background-image css property. If file path is provided, its value will include file path too. Otherwise only the image!

shajib0o Over a year ago

'(/link/to_new_file.png)' what should i write here

shajib0o Over a year ago

it's not working 'var el = document.getElementById('a').backgroundImage; if (el == "url(Black-Wallpaper.jpg)") { //el.style.backgroundImage = "url(cross1.png)"; alert("its working"); }'

Afzaal Ahmad Zeeshan Over a year ago

Please add ('a').style.backgrounImage instead of simple ('a').backgroundImage. Because background is a property of style of the object not a property of the object.

|

Vignesh Subramanian · Accepted Answer · 2015-02-26 05:12:03Z

4

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;
        }

answered Feb 26, 2015 at 5:12

Vignesh Subramanian

7,31915 gold badges97 silver badges161 bronze badges

Comments

Osi · Accepted Answer · 2023-07-05 12:58:18Z

3

//Get the Element from the DOM
var element = document.getElementById("a");

// Change the background image
element.style.backgroundImage = "url('Black-Wallpaper.jpg')"

answered Jul 5, 2023 at 12:58

Osi

4883 silver badges13 bronze badges

Comments

Luvexina · Accepted Answer · 2019-11-30 20:59:52Z

2

HTML

<body id="body">
</body>

JavaScript

you can set the time also.

//Initializing
var i = 0;
var images = []; //array
var time = 3000; // time in millie seconds

//images

images[0] = "url(./Images/1.jpg)";
images[1] = "url(./Images/2.jpg)";
images[2] = "url(./Images/3.jpg)";
//function

function changeImage() {
    var el = document.getElementById('body');
    el.style.backgroundImage = images[i];
    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    setTimeout('changeImage()', time);
}

window.onload = changeImage;

CSS

overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;

edited Nov 30, 2019 at 20:59

Luvexina

84311 silver badges26 bronze badges

answered Nov 30, 2019 at 17:18

Kirankumar Gonti

1913 silver badges2 bronze badges

1 Comment

Luvexina Over a year ago

Please add an explanation on why this works. Thank you!

RahulOnRails · Accepted Answer · 2021-10-07 18:52:09Z

    

 //Here is an example how to change background image of <div> element using javascript  by feching a new URL form some API.
 // let image teched from API: this is the image you want to put as new background !
// thumbnail image:
// data.picture.thumbnail
//the HTML element whose background needs to be changes is given an id of #thumbnail.

 var thumbUrl = document.querySelector("#thumbnail");
     
//using a function which will update data in the HTML - this is done
//after parsing of the data fetched, I have omitted the steps used for parsing the data.
function updateData(data){
   //data.picture.medium represents our new fetched data containing the URL fo the new image we want to use as background image.
    var newImage=data.picture.medium;
    thumbUrl.style.backgroundImage="url("+newImage+")";
}

RahulOnRails · Accepted Answer · 2021-10-07 14:47:30Z

0

//Here is an example how to change background image of element using javascript by feching a new URL form some API.

// let image teched from API: this is the image you want to put as new background !

// thumbnail image:

// data.picture.thumbnail

//the HTML element whose background needs to be changes is given an id of #thumbnail.

var thumbUrl = document.querySelector("#thumbnail");

//using a function which will update data in the HTML - this is done

//after parsing of the data fetched, I have omitted the steps used for parsing the data.

function updateData(data){

  //data.picture.medium represents our new fetched data containing the URL fo the new image we want to use as background image.
  var newImage=data.picture.medium;
  thumbUrl.style.backgroundImage="url("+newImage+")";

}

edited Oct 7, 2021 at 14:47

RahulOnRails

6,54211 gold badges55 silver badges88 bronze badges

answered Oct 7, 2021 at 3:26

daadadad

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Frisdik Nanda · Accepted Answer · 2022-08-01 14:48:26Z

-1

you can do this

backgroundImage: url(${musics[0].image})

answered Aug 1, 2022 at 14:48

Frisdik Nanda

1

Comments

nikhil kumar · Accepted Answer · 2022-08-03 14:11:53Z

-3

Bro same problem occured with me🥲. Then I realised that javascript does not work properly when the element's position is fixed or absolute.try changingits position to relative or just remove position property.

edited Aug 3, 2022 at 14:11

answered Aug 3, 2022 at 14:10

nikhil kumar

33 bronze badges

1 Comment

jv-k Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

how to change the background image of div using javascript?

9 Answers 9

2 Comments

7 Comments

Comments

Comments

HTML

JavaScript

CSS

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

7 Comments

Comments

Comments

HTML

JavaScript

CSS

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related