How can I determine the background image URL of a div via JavaScript?

Question

I\'ve found plenty of information on how to change the background image of a div using JavaScript, but I am trying to use JavaScript to determine which background image is b

Answer 1

Get the background property:

alert(document.getElementById("widgetField").style.background);

Displays : url(includes/images/datepicker_open.png)

Edit: Andy E's answer should be close to what you need. One difference is that for IE you need

currentStyle.backgroundImage 

instead of

currentStyle.background

Answer 2

this should do it

alert( document.getElementById("widgetField").style['background-image'] );

You can do the following to get all the style properties after you have made changes ... so you see where the new things went ...

  var style = document.getElementById("widgetField").style;
  var allprops = '';
  for  ( i in style )
    allprops += style[i] + ':' + i + '\n' ;
  alert( allprops );

[EDIT] as i go along i will add here ..
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: style.background

style.backgroundImage work on all browsers ( IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) for Windows ..

Answer 3

You're setting the background property, background and backgroundImage are two seperate properties which is why backgroundImage is empty after setting background. If you want to access just the url part of the background property, you can use the following code:

var wfBg = document.getElementById("widgetField").style.background;
var wfBgUrl = wfBg.match(/(url\(['"]?([^)])['"]?\))/i);

if (wfBgUrl)
{
    // Add your code here. wfBgUrl[1] is full string including "url()", 
    // wfBgUrl[2] would be just the url inside the parenthesis
}

For styles set by css documents:

if (window.getComputedStyle) // For standards compliant browsers
    var wfBg = window.getComputedStyle(
        document.getElementById("widgetField")
    ).getPropertyValue("background");
else // for IE
    var wfBg = document.getElementById("widgetField").currentStyle.background;

Answer 4

Try this:

var img = document.getElementById('widgetField'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1);

Answer 5

Don't use these methods. Keep track of the background images in an array if you can. Different browsers will return different results when trying to get the background image value.

Firefox will return: 'url("../images/someimagefile.jpeg")'

Chrome will will return: 'url("https://www.yourdomain/images/someimagefile.jpeg")'

Just creating more problems if you ask me - and uncertainty with browser responses - including tablets.

• I used the above methods of trying to read the background image file name first, and they caused more problems than I wanted - including on mobile devices.
• I switched to keeping track of which images are in which div, by using an array with the background image file names stored in the array