How do I get background image size in jQuery?

Question

The problem is simple. How do I get a div's background image size (width and height) in jQuery. Is it even possible? I thought this would work:

jQuery('#myDiv').css('background-image').height(); 

The error message I get is that this is not a function.

Answer 1

One more version. No DOM manipulation needed, all characters in image file name supported.

UPDATE See an alternative version below.

var image_url = $('#something').css('background-image'),     image;  // Remove url() or in case of Chrome url("") image_url = image_url.match(/^url\("?(.+?)"?\)$/);  if (image_url[1]) {     image_url = image_url[1];     image = new Image();      // just in case it is not already loaded     $(image).load(function () {         alert(image.width + 'x' + image.height);     });      image.src = image_url; } 

---

2018 solution

This answer is still receiving upvotes 5 years after. I thought I will share a more complete solution. This builds on top of original code and wraps it into a function. It uses jQuery Deferred Object, adds error handling and updates RegExp to match 3 possible cases: url(), url("") and url(''). It also works on jQuery 1 to 3.

var getBackgroundImageSize = function(el) {     var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);     var dfd = new $.Deferred();      if (imageUrl) {         var image = new Image();         image.onload = dfd.resolve;         image.onerror = dfd.reject;         image.src = imageUrl[1];     } else {         dfd.reject();     }      return dfd.then(function() {         return { width: this.width, height: this.height };     }); };  // // Usage // getBackgroundImageSize(jQuery('#mydiv'))     .then(function(size) {         console.log('Image size is', size.width, size.height);     })     .fail(function() {         console.log('Could not get size because could not load image');     });