How do I get background image size in jQuery?

JqueryCss

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

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');
    });

Solution 2 - Jquery

You'll have to do something like this:

var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
	var height = $(this).height();
	alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);

Due to the simplicity of the code, you cannot use parenthesis or quotation marks in the URLs of your background images. However, the code could be extended for greater support. I just wanted to convey the general idea.

Solution 3 - Jquery

Late answer, but you could also do this:

var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

Then you don't have to manipulate the dom objects;

Solution 4 - Jquery

Another short way :

function bgSize($el, cb){
	$('<img />')
		.load(function(){ cb(this.width, this.height); })
		.attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}

usage

bgSize($('#element-with-background'), function(width, height){
    console.log('width : ' + width + ' height : ' + height);
});

https://jsfiddle.net/x4u2ndha/58/

Solution 5 - Jquery

I merged the answer from John together with the Plugin Style from Stryder. This plugin waits for the image to load:

$.fn.getBgImage = function(callback) {
    var height = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = $('<img />');
    tempImg.hide(); //hide image
    tempImg.bind('load', callback);
    $('body').append(tempImg); // add to DOM before </body>
    tempImg.attr('src', path);
    $('#tempImg').remove(); //remove from DOM
};


// usage
$("#background").getBgImage(function() {
    console.log($(this).height());
});

feel free to extend this code: https://gist.github.com/1276118

Solution 6 - Jquery

Its been a while but I needed this solution as well, based on some suggested solutions here is my complete solution.

$.fn.getBgHeight = function () {
        var height = 0;
        var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
        var tempImg = '<img id="tempImg" src="' + path + '"/>';
        $('body').append(tempImg); // add to DOM before </body>
        $('#tempImg').hide(); //hide image
        height = $('#tempImg').height(); //get height
        $('#tempImg').remove(); //remove from DOM
        return height;
    };

Solution 7 - Jquery

I made the same thing for the width :)

$.fn.getBgWidth = function () {
    var width = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = '<img id="tempImg" src="' + path + '"/>';
    $('body').append(tempImg); // add to DOM before </body>
    $('#tempImg').hide(); //hide image
    width = $('#tempImg').width(); //get width
    $('#tempImg').remove(); //remove from DOM
    return width;
};

Solution 8 - Jquery

Maybe few possibilities, I've tried to simplify as much and finaly this works for me

var img = new Image ;
img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", "");
$(img).load(function() {
	var bgImgWidth = img.width;
	var bgImgHeight = img.height;
	console.log("w::"+bgImgWidth+",h::"+bgImgHeight) ;
}) ;

Solution 9 - Jquery

css('background-image') will return "url(.....)", you can't test the height of the image with that, since it's not a DOM object.

Solution 10 - Jquery

the same as above, but using regexp instead of replace()

$.fn.extend({
    /**
     * gets background image
     * @param callback function (inside - this = HTMLElement image)
     */
    get_bg_image: function(callback) {
        if (typeof callback != 'function') return;
        var regexp = /url\((.+)\)/i,
            regexp2 = /["']/gi,
            res = regexp.exec($(this).css('background-image')),
            img_src = res[1].replace(regexp2, ''),
            $tempImg = $('<img />');
        $tempImg.hide();
        $tempImg.bind('load', function(e) {
            callback.call(this, e);
            $tempImg.remove();
        });
        $('body').append($tempImg);
        $tempImg.attr('src', img_src);
    }
});

// usage
$('div').get_bg_image(function() {
    var bg_img_width = $(this).width();
});

Solution 11 - Jquery

The following is my adaptation:

$.fn.getBgDim = function (callback) {
	var width  = 0,
	    height = 0,
	    path   = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""),
	    tmp    = $("<img />");
	tmp.hide();
    tmp.bind("load", function() {
		width = $(this).width(); 
		height = $(this).height();
		callback({"width": width, "height": height});
		$(this).remove();
	});
	$("body").append(tmp);
	tmp.attr('src', path);
};

Usage:

$("#image").getBgDim(function(dim) {
	console.log("Height: " + dim.height + " Width: " + dim.width);
});

Solution 12 - Jquery

Here is my rendition.

$.fn.getBgImage = function (callback) {
    var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
    var tempImg = $('<img />').hide().bind('load', function () {
        callback($(this).width(), $(this).height());
        $(this).remove();
    }).appendTo('body').attr('src', path);
};

Usage:

imgDiv.getBgImage(function (imgW, imgH) {
    //use the imgW and imgH here!   
});

Solution 13 - Jquery

Combined version of the above solutions

var width,
    height;

$(image).load(function () {
    width  = image.width;
    height = image.height;
});

image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");

Solution 14 - Jquery

In the case your css had double quotes or browser manipulation do the following.

var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"','');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
    var height = $(this).height();
    alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);

Solution 15 - Jquery

// The above all solutions may work in all browsers except IE11 so below is the modified solution for IE11 browser
//The height calculated for IE11 wasn't correct as per above code

$.fn.getBgImage = function(callback) {
  if (typeof callback != 'function') return;
  var regexp = /url\((.+)\)/i,
      regexp2 = /["']/gi,
      res = regexp.exec($(this).css('background-image')),
      img_src = res[1].replace(regexp2, ''),
      $tempImg = $('<img />');
  $tempImg.hide();
  $tempImg.bind('load', function(e) {
      callback.call(this, e);
      $tempImg.remove();
  });
  $('body').css({ 'width': 100 + '%' });
  $tempImg.css({ 'width': 100 + '%' });
  $('body').append($tempImg);
  $tempImg.attr('src', img_src);
}

Solution 16 - Jquery

In my particular case, I needed something which would work with background-image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(...). I needed also a code that would be able to check several image from a specific class without copying the code for each image.

Maybe it could be useful for someone ! (I'm absolutely not an Jquery expert, since I started to code a month ago for my personal website.. So feel free to correct if needed !)

This work latest jQuery 3 and IE11 too. for backward JQuery compatibility, I think you can only replace .on("load", function() by .load(function().

//will check all div with this class or id
var $image = $('#myDiv');
//will extract url only by splitting property on comas (takes care of comas on rgba(x, x, x, x))
var imageUrl = $image.css('background-image').split(",")[8].replace('url(','').replace(')','').replace('"','').replace('"','');
var img = new Image ;
img.src = imageUrl;

$(img).on("load", function() {
  var image_width = img.width;
  var image_height = img.height;
  console.log(image_width + " x " + image_height) ;
}) ;

Solution 17 - Jquery

This is the most popular question regarding this topic, so I have to say that I don't understand why people try to overcomplicate things. Also I have to admit that I don't know how on earth one can call load() JQuery function with just one parameter which is callback, since the method takes 3 parameters. As far as I am aware this would cause 'IndexOf()' is not defined exception. I don't know if I am missing sth or the API has changed so much over the years. Anyway here is a working solution as of 2020:

jQuery.fn.extend({
	backgroundImageSizeAsync: async function() {
		const imageUrl = this.css("background-image").match(/^url\("?(.+?)"?\)$/)[1];
		const image = new Image();

		await $.Deferred(function (task) {
			image.onload = () => task.resolve(image);
			image.onerror = () => task.reject();
			image.src = imageUrl;
		}).promise();

		return {
			width: image.width,
			height: image.height
		}
	},
});

call:

const size = await $(selector).backgroundImageSizeAsync();
Categories
Recommended Jquery Solutions
Recommended Css Solutions

Previous Solution:

How do you delete a commit in Mercurial?

MercurialMercurial Commit

Next Solution:

Is it possible to programmatically catch all events on the page in the browser?

JavascriptEventsDomBrowser

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFoadView Question on Stackoverflow
Solution 1 - JqueryVilius PaulauskasView Answer on Stackoverflow
Solution 2 - JqueryJohn KurlakView Answer on Stackoverflow
Solution 3 - JqueryJonView Answer on Stackoverflow
Solution 4 - JqueryFreezView Answer on Stackoverflow
Solution 5 - JqueryschmidsiView Answer on Stackoverflow
Solution 6 - JqueryStryderView Answer on Stackoverflow
Solution 7 - JqueryJankeesvwView Answer on Stackoverflow
Solution 8 - JqueryChristopheView Answer on Stackoverflow
Solution 9 - JqueryCapsuleView Answer on Stackoverflow
Solution 10 - JqueryxramonzView Answer on Stackoverflow
Solution 11 - JqueryBasView Answer on Stackoverflow
Solution 12 - Jquerybox86rowhView Answer on Stackoverflow
Solution 13 - JqueryholgerView Answer on Stackoverflow
Solution 14 - JqueryDesignaroniView Answer on Stackoverflow
Solution 15 - JqueryZohaib KathwariView Answer on Stackoverflow
Solution 16 - JqueryLyddarkView Answer on Stackoverflow
Solution 17 - JqueryrvnlordView Answer on Stackoverflow