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?


Yes, and I’d do it like this…

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

  // 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.

Answered By – alex

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.