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 being displayed. The code to set the image goes like this:

document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";

I have tried every combination I can think of to access the background image url, but so far no dice:

alert(document.getElementById("widgetField").style.backgroundImage.url);  - returns Undefined
alert(document.getElementById("widgetField").style.backgroundImage);  - empty response
alert(document.getElementById("widgetField").style.background);
alert(document.getElementById("widgetField").style.background.image);
alert(document.getElementById("widgetField").style.background.url);
alert(document.getElementById("widgetField").style.background.image.url);
alert(document.getElementById("widgetField").style.background.value);
alert(document.getElementById("widgetField").style.background.image.value);
alert(document.getElementById("widgetField").style.background.image.value);
alert(document.getElementById("widgetField").style.backgroundImage.value);

Does anyone know how to do this? Is it possible?

BTW, here is the way the image is being set in CSS in the beginning:

#widgetField {
    width: 290px;
    height: 26px;
    background: url(../images/datepicker_closed.png);
    overflow: hidden;
    position: relative;
}

UPDATE:

If I run the following, it works:

document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";
alert(document.getElementById("widgetField").style.background);

However, I cannot seem to access the URL property until it has been set by JavaScript, even though it is already defined in the CSS file. Is there a reason why the raw CSS setting is not accessible?

Have you tried .style.background instead of .style.backgroundImage? — kennytm
– kennytm, Commented Jan 20, 2010 at 19:13
Yes, I've tried style.background, style.background.image, style.background.url, style.background.image.url, style.background.value, style.background.image.value, style.backgroundImage.value as well. Thanks. — user77413
– user77413, Commented Jan 20, 2010 at 19:18
@openid_kenja: You need to get the computed style of the element - see my updated answer. — Andy E
– Andy E, Commented Jan 20, 2010 at 19:37

Mic · Accepted Answer · 2010-01-20 20:11:42Z

16

Try this:

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

answered Jan 20, 2010 at 20:11

Mic

25.2k9 gold badges62 silver badges71 bronze badges

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

1 Comment

user77413 Over a year ago

Simple. Elegant. Works. Thanks to everyone for your help!

dev-null-dweller · Accepted Answer · 2013-09-08 18:45:55Z

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;

edited Sep 8, 2013 at 18:45

dev-null-dweller

29.5k3 gold badges68 silver badges87 bronze badges

answered Jan 20, 2010 at 19:15

Andy E

346k86 gold badges482 silver badges452 bronze badges

2 Comments

user77413 Over a year ago

I've tried accessing it through both the background and backgroundImage properties and neither one returns anything. BTW, I've updated the original question to include how the CSS is being set in the beginning. Thanks.

Andy E Over a year ago

In which case you need to use currentStyle for IE and getComputedStyle() for other browsers.

Giorgio · Accepted Answer · 2022-02-25 01:29:28Z

1

The CSS backgorund prop may also include additional attributes as seen on https://developer.mozilla.org/en-US/docs/Web/CSS/background

background: no-repeat url("../../media/examples/lizard.png")

Using a simple img.style.background.slice(4, -1) will give wring results in these cases.

Why not use

/url\(".+"\)/i.exec(img.style.background)[0].replace(/^url\("/i, '').replace(/"\)$/i, '')

where /url$".+"$/i is a regex that matches the url("...") part, of which you take the first match with [0] and then replace the initial url(" with replace(/^url$"/i, '') and the ending ") with replace(/"$$/i, '')

answered Feb 25, 2022 at 1:29

Giorgio

1418 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2010-01-20 19:41:58Z

0

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 ..

edited Jan 20, 2010 at 19:41

answered Jan 20, 2010 at 19:20

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

rosscj2533 · Accepted Answer · 2010-01-20 19:50:15Z

0

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

edited Jan 20, 2010 at 19:50

answered Jan 20, 2010 at 19:16

rosscj2533

9,3437 gold badges41 silver badges58 bronze badges

Comments

score 0 · Accepted Answer · 2012-12-28 23:13:38Z

0

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

edited Dec 28, 2012 at 23:13

answered Dec 28, 2012 at 23:08

user1502852

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related