Get the Size of a CSS Background Image Using JavaScript?

Is it possible to use JavaScript to get the actual size (width and height in pixels) of a CSS referenced background image?

Answer

Yes, and I’d do it like this…

window.onload = function () {
  var imageSrc = document
    .getElementById('hello')
    .style.backgroundImage.replace(/url((['"])?(.*?)1)/gi, '$2')
    .split(',')[0];

  // I just broke it up on newlines for readability

  var image = new Image();
  image.src = imageSrc;

  image.onload = function () {
    var width = image.width,
      height = image.height;
    alert('width =' + width + ', height = ' + height);
  };
};

Some notes…

• We need to remove the url() part that JavaScript returns to get the proper image source. We need to split on , in case the element has multiple background images.
• We make a new Image object and set its src to the new image.
• We can then read the width & height.

jQuery would probably a lot less of a headache to get going.