Jquery does not resize the image on a cursor


The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).

I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":

 $(document).ready(function() {
    $('#slides').coinslider({ hoverPause: true });

    $('#slides').css('background-size', '477px 205px');

    $('#slides').css('overflow', 'hidden');

but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again

Change this:

 $('#slides').css('background-size', '477px 205px');

To this:


The overflow: hidden will hide the rest of the image.