Question

Hey guys, quick question, all I want to do is resize an image to fit inside a small container when I run this function. Right now, only a portion of the image is shown inside the div. If anyone has any ideas, I would appreciate any advice.

$(this)
       .css({
           backgroundImage    : 'url(' + src + ')',   // set background image
           backgroundPosition : 'center center',      // position background image
           backgroundRepeat   : 'no-repeat'           // don't repeat image
       });

Answer 1

Only very modern browsers (meaning Webkit) can scale background images. So I’d recommend inserting a new DOM element as the image and then changing it’s height and width should scale it down. Than use CSS (things like position and z-index should help you) to position it where you need it.