87

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?

palaѕн
  • 68,816
  • 17
  • 108
  • 129
celliott1997
  • 1,105
  • 1
  • 8
  • 17

6 Answers6

106

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

palaѕн
  • 68,816
  • 17
  • 108
  • 129
  • 3
    Unfortunately this does not work on IE as the string returned is quoted. so I ended up with this: `bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");` And now works :) – Miguel Garrido May 06 '15 at 04:57
  • 1
    Firefox quotes the strings too. At least as of FF39. – Will Aug 28 '15 at 15:14
  • 2
    `style.backgroundImage.slice(5, -2)` works too of course. – Mark Hewitt Dec 08 '17 at 06:47
  • slice?? I feel like a medieval peasant – Toolkit Nov 08 '19 at 05:32
  • 1
    This is great and answer's OP's question 9 years ago, but be aware that it won't work if `backgroundImage` has a `linear-gradient`; e.g.: `background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url(https://my.image.com);` – rpearce Nov 15 '21 at 05:32
26

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, "");
Elias Zamaria
  • 89,268
  • 31
  • 107
  • 141
sawyer
  • 401
  • 4
  • 7
15

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, "");
Praveen Kumar Purushothaman
  • 160,666
  • 24
  • 190
  • 242
  • 1
    This substring just removes the `url(`. It doesn't remove the quotes. The replace won't work for double quotes. Using the substring _and_ the replace is okay, but won't handle double quotes. `backgroundImage.slice(4, -1).replace(/["']/g, "");` is what you're looking for – narthur157 Aug 13 '19 at 20:15
  • 3
    @narthur157 agreed and updated, but this is a 7 year old answer. – Praveen Kumar Purushothaman Aug 13 '19 at 21:25
10

First of all you need to return your background-image content:

var img = $('#your_div_id').css('background-image');

This will return the URL as following:

"url('http://www.example.com/img.png')"

Then you need to remove the un-wanted parts of this URL:

img = img.replace(/(url\(|\)|")/g, '');
Alanoud Just
  • 309
  • 3
  • 5
1

const regex = /background-image:url\(["']?([^"']*)["']?\)/gm;
const str = `<div style="background-image:url('http://www.example.com/img.png');">...</div>`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}
武状元 Woa
  • 500
  • 2
  • 9
  • 20
1

Log to console all background-image URLs, without parentheses and quotes:

var element = document.getElementById('divId');
var prop = window.getComputedStyle(element).getPropertyValue('background-image');
var re = /url\((['"])?(.*?)\1\)/gi;
var matches;
while ((matches = re.exec(prop)) !== null) {
    console.log(matches[2]);
}
alissonmuller
  • 307
  • 4
  • 7