Have Geek Brain

Jquery resize

Hi guys quick question, all I want to do is resize the image to fit inside a small container when I run this function. Right now, only part 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
       });
+2


a source to share


2 answers


Only very modern browsers (i.e. Webkit) can scale background images. Therefore, I recommend inserting a new DOM element as an image, and then changing its height and width to zoom out. Instead of using CSS (things like position and z-index should help you) to place it where you need it.



+4


a source


Well, this is the css:

#container{
    background-size: cover;
    -moz-background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    }


Jquery:

var url = "your_url";
$('#container').css("background-image", url);
+1


a source






More articles:


All Articles