How to get background image URL of an element using JavaScript?

Question

How would I get the background-image URL of a <div> element in JavaScript? For example, I have this:

<div style="background-image:url('http://www.example.com/img.png');">...</div> 

How would I get just the URL of the background-image?

Answer 1

You can try this:

var img = document.getElementById('your_div_id'), style = img.currentStyle || window.getComputedStyle(img, false), bi = style.backgroundImage.slice(4, -1).replace(/"/g, ""); 

// Get the image id, style and the url from it  var img = document.getElementById('testdiv'),    style = img.currentStyle || window.getComputedStyle(img, false),    bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");    // Display the url to the user  console.log('Image URL: ' + bi);

<div id="testdiv" style="background-image:url('http://placehold.it/200x200');"></div>

Edit:

Based on @Miguel and other comments below, you can try this to remove additional quotation marks if your browser (IE/FF/Chrome...) adds it to the url:

bi = style.backgroundImage.slice(4, -1).replace(/"/g, ""); 

and if it may includes single quotation, use: replace(/['"]/g, "")

DEMO FIDDLE

Answer 2

Just to add to this in case anyone else has a similar idea, you could also use Regex:

var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1]; 

However it seems like @Praveen's solution actually performs better in Safari and Firefox, according to jsPerf: http://jsperf.com/match-vs-slice-and-replace

If you want to account for cases where the value includes quotes but are unsure whether it's a double or single quote, you could do:

var url = backgroundImage.slice(4, -1).replace(/["']/g, "");