How to get background image URL of an element using JavaScript?
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
Try this:
var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));
Or, using replace
:
url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");
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, "");