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

by

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

More Related Contents:

  1. Close ad to continue as free user?
  2. JS hide function error
  3. How to read with JavaScript [closed]
  4. How to implement something like this GIF that using mouse drag and select items
  5. Javascript counting all the characters from a HTML document
  6. Load and execution sequence of a web page?
  7. Disabling browser print options (headers, footers, margins) from page?
  8. How to generate a simple popup using jQuery
  9. JSFiddle code not working in my own page
  10. How do I edit a CSS variable using JS?
  11. How to pause and resume CSS3 animation using JavaScript?
  12. What do curly braces in JavaScript mean?
  13. How to detect which one of the defined font was used in a web page?
  14. Remove all classes that begin with a certain string
  15. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  16. Access CSS variable from javascript [duplicate]
  17. How to show a running progress bar while page is loading
  18. Use :hover to modify the css of another class?
  19. “pointer-events: none” does not work in IE9 and IE10
  20. Using CSS3 Animations in IE9+
  21. jQuery Validation using the class instead of the name value
  22. How to make jQuery to not round value returned by .width()?
  23. Dark mode flickers a white background for a millisecond on reload
  24. How to create checkbox inside dropdown?
  25. collapse and expand tabs jquery / simple accordion
  26. How to trigger CSS “hover state” using Javascript? [duplicate]
  27. Preventing Child from firing parent’s click event
  28. Gaussian Blur onHover Using jQuery
  29. Google’s Imageless Buttons
  30. How to apply background-color to a selected option?

Leave a Comment