How to Get Background Image Url of an Element Using JavaScript

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 itvar img = document.getElementById('testdiv'),  style = img.currentStyle || window.getComputedStyle(img, false),  bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
// Display the url to the userconsole.log('Image URL: ' + bi);

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

Get background image url value

Get the style value, then strip the URL from it

var bi = $('a').css("background-image");
alert(bi.split(/"/)[1]);

The call to jQuery .css("background-image") always returns the URL within double quotes, regardless how it was set originally.

Sample fiddle:
https://jsfiddle.net/6qk3ufcb/

How to get the url of a background-image

An ID ensures you get a single element from the DOM, whereas getting by class you can get multiple instances.

It's kinda bad practise to do what I'm about to show you, but given that there is only one instance of vjs-poster class you can get all instances of vjs-poster by CLASS, and select the first instance in the returned array where you'll be able to get the style.

// Get the image id, style and the url from itvar img = document.getElementsByClassName('vjs-poster'),  style = img.currentStyle || window.getComputedStyle(img[0], false),  bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
// Display the url to the useralert('Image URL: ' + bi);

<div class="vjs-poster" id="vjs-poster" tabindex="-1" aria-disabled="false" style="background-image: url(https://www.example.com);"></div>

Get CSS background-image url from ID

You can use element style backgroundImage property:

var img = document.getElementById('image'),    url = img.style.backgroundImage;
console.log(url);

<div id="image" style="background-image: url(/test.com/test.jpg)">

How to retrieve the url from background image using Selenium and Javascript

document.getElementsByClassName('classname')[0].style.backgroundImage.slice(4, -1).replace(/"/g, "");

jQuery get each background image URL of each element and wrap it in a href

Try this. If you're trying to get the background image of each item, you should use $(this) which references the current item in the loop (in this case, each .client div as you loop over them). The way you have it now is referencing a collection of every .client div on the page.

$(document).ready(function(){
  $('.bg-cover').each(function(index, el) {
    var bgurl = $(this).css('background-image');

    if (bgurl != 'none') {
      bgurl = bgurl.replace('url("','').replace('")','');
      $($('.client .flex_cell_inner')[index]).wrapInner('<a href="'+ bgurl +'" rel="lightbox"></a>');
    };
  });
});

How to Get Background Image Url of an Element Using JavaScript