Get the Size of a CSS Background Image Using JavaScript?

Question

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

Answer 1

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.