How to .animate() a background-image size

Question

Can I .animate a background-image size with javascript/jquery?

The code where wt_r and ht_r are the screen size. Can I make that dynamic with .animate()?

$('#outer').css('background-size',wt_r+' '+ht_r);

jsfiddle- http://jsfiddle.net/m7zmzkpz/1/

Answer 1

You can't change both height and width of a background-image.

Using .animate():

$('#outer').animate({backgroundSize: '100%'}, 800);

Answer 2

It is hard to answer question without more information, but you can try animate your background size with backgroundSize property? like this:

$('#outer').animate({ backgroundSize: '100%' }, 3000);

Try to use your own parameters wt_r and ht_r as backgroundSize value

Hope this helps!