background-image actual size in jQuery

Question

I need to know the actual size in pixels of a background image.

<style>
body {
    background-image: url(background.jpg);
    background-size: contain;
}
</style>

When I look at it when jQuery, I tried

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

but this brings me the size of the real image, not the size that this image gets when is displayed: if the device has 320px width, the bgImgWidth still gives me the 800px of the real image.

Does anybody has a clue on this?

The problem is that if I need to know the image size, not the dimensions. The body can have the size of the screen, for example, but the image will have other. — ludiccc, Mar 09 '16 at 12:57
So, the `background-size:contain` property preserves the image's proportion. If you enter that ratio into the calculation, you might be able to figure this out. Get width of body and calculate the height based on the ratio — Aziz, Mar 09 '16 at 12:59
Possible duplicate of [Background Size: Contain, get Size after scale](http://stackoverflow.com/questions/20011685/background-size-contain-get-size-after-scale) — Aziz, Mar 09 '16 at 18:01

Baerkins · Accepted Answer · 2016-03-09T15:16:52.173

If you can get the width and height of the image, then you can get the height of the displayed image based on proportions.

var img = new Image();
var $el = $('body');
var containHeight = null;
var containWidth = null;
var containImg = {
  w: null,
  h: null
};
var bkgImgDims = null;

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

var bgImgWidth = img.width;
var bgImgHeight = img.height;

var imgProportionalH = Math.abs(bgImgHeight / bgImgWidth);
var imgProportionalW = Math.abs(bgImgWidth / bgImgHeight);

// Get the proportions of the background contain image
function getElProportions() {
  var elW = $el.width();
  var elH = $el.height();
  var elProportionalH = Math.abs(elH / elW);
  var elProportionalW = Math.abs(elW / elH);

  // Check to see if the image is less than 100% of the element width
  if(elProportionalH < imgProportionalH) {

    containImg.h = elH;
    containImg.w = Math.abs( elH / imgProportionalH );        

  } else {

    containImg.h = Math.abs( elW / imgProportionalW );
    containImg.w = elW;

  }

  return containImg;
}


$(document).ready(function(){
  bkgImgDims = getElProportions();
});

$(window).resize(function(){
  bkgImgDims = getElProportions();
});

JSBin Example

score 0 · Answer 2 · answered Mar 09 '16 at 15:28

There is script from a plugin that can help: Source: https://gist.github.com/schmidsi/1276118

I put it in a JSFiddle and added to it so you can see and compare the body to the background image.

var url = $('body').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
var bodyHeight = $('body').height();
var bodyWidth = $('body').width();

bgImg.hide();
bgImg.bind('load', function()
{
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

    alert("Body height: " + bodyHeight + "px, Body width: " + bodyWidth + "px");
    alert("Image height: " + imgHeight + "px, Image width: " + imgWidth + "px");
});
$('body').append(bgImg);
bgImg.attr('src', url);

Sorry - failed to add the background-size:contain to the code so I didn't notice... but try this link: http://stackoverflow.com/questions/20011685/background-size-contain-get-size-after-scale — PlatinumJay, Mar 09 '16 at 17:39

background-image actual size in jQuery

2 Answers2