Retrieve a rendered background image's dimensions with jQuery

I have a page with a list of items where each item has a square div containing a background image. This image can have dimensions which are either bigger, or smaller than the div itself. The background centered and contained in the div so it is always shown in the middle of the div. The css for this is as follows:

    .productImage
    {
      width:  225px; 
      height: 225px; 
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      margin-left:70px;
    }

The background-image itself is set using a jQuery call that modifies the css of the div. This works like charm, however I would like to know the dimensions of the rendered background image. If the rendered is smaller than a specific dimension I would like to set a background color for aesthetic reasons.

I am currently unable to retrieve the dimensions of the rendered images. I have used the following code in a loop to try and retrieve the dimensions of the images, but this returns the original dimensions of the images, before they have been scaled into the div.

images[i] = new Image();
images[i].src = $('#image'+i).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
images[i].pos = i;

images[i].onload = function() {
var position = this.pos;
width = this.width;
height = this.height;

console.log("For image "+position+" the height is "+height+" and width is "+ width);
}

How would I be able to find out the dimensions of the rendered background image using jQuery or pure Javascript? Is this even possible?

Thanks in advance.