Question

I would like to write a jQuery plugin to animate a background-size property from cover to 100% and vice versa but I don’t know how to get the cover to percent values, is it possible to get the resized width and height of a sized background image?

I know I can get $('#selector').css('backgroundSize') but I get cover and I would like to convert it in the current width and height of the background image, how can I do that?

Answer 1

If you can get the dimensions of the image then you can check them against the dimensions of the container in which the image is the background-image. You can use these two pieces of information to turn cover into a percentage.

To get the dimensions of the image, create an img element to test:

$('<img />').bind('load', function () {
    //the image has loaded, you can now get it's height/width
}).addClass('offScreen').attr('src', '...');

The offScreen class is used to move the element off the screen while it loads so the user can’t see it happening:

.offScreen {
    position : absolute;
    left     : -9999px;
}