Can I get a div's background-image URL?

Efficiency trick with jQuery

JavaScript got us started, but jQuery steps in to save the day – and some keystrokes:

let bgUrl = $('#divId').css('background-image').replace(/url\((['"]?)(.*?)\1\)/g, '$2'); // Pulling out URL like a rabbit from the hat


The .css() method gets the computed style while .replace() surgically cuts out what's not needed, presenting a clean, usable URL.

Robust handling of 'none' and URL formats

Great Jedi programmers prepare for all possible disturbances in the code:

• No Background Image: If Vader set backgroundImage to 'none', we snap into action:

  let computedStyle = getComputedStyle(document.getElementById('divId')).backgroundImage; // The Force is with us
  let bgUrl = computedStyle !== 'none' ? computedStyle.slice(5, -2) : 'No background image'; // Jedi mind trick
  

• URL Format Jiggery-Pokery: Background images come in various URL formats, not unlike the myriad species in the Star Wars universe. Be ready to normalize these formats for consistent handling.

Performance tip: Avoid regex overhead

Great power comes great responsibility. Regular expressions are super handy, but their power can be an overkill for simple tasks. The .slice(5, -2) pattern sidesteps regex overhead, helping you speed through galaxies of elements.

Extended utility of this method

Inline styles? No problem

For inline div styles, the above snippets work as smooth as a lightsaber cut. But how do we deal with styles set in external CSS or <style> blocks?

Computed styles? Bring 'em on

let elStyle = getComputedStyle(document.querySelector('.your-class-name')); // The Force got this! 
let bgUrl = elStyle.backgroundImage.slice(5, -2); // Making a clean cut


Ensure the selector you're using is correct when dealing with non-inline styles.

More backgrounds than you can shake a stick at?

Sometimes your div may have multiple backgrounds. The Force is with you, young Jedi:

function extractBackgroundImages(backgroundImage) {
  return backgroundImage.split(/),\s*/).map(url => url.slice(5, -2)); // Extract URLs like wisdom teeth
}

let bgImages = getComputedStyle(document.getElementById('divId')).backgroundImage;
let urls = extractBackgroundImages(bgImages); // More URLs than stars in the sky!
