scaling background and min size

Hi I have big background images 1200 by 1200, what i would like to do is expand the images when the user resizes the browser but constrain it so they never scale any smaller than the original size.

There all lots of scalable bg images out there but none I 开发者_JAVA技巧can find that do this, any help would be appreciated.

background-size: cover;

there you go

The following CSS + Javascript + JQuery combination has worked for me.

Thanks to ANeves for the above answer which was helpful.

CSS:

body
{
    background: url(background.jpg) center center fixed;
    background-size: 100% auto;
}

Javascript (JQuery):

jQuery (function ($)
{   // ready
    $(window).resize (function (event)
    {
        var minwidth = 1200;
        var minheight = 1024;

        var bodye = $('body');

        var bodywidth = bodye.width ();

        if (bodywidth < minwidth)
        {   // maintain minimum size
            bodye
                .css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
            ;
        }
        else
        {   // expand
            bodye
                .css ('backgroundSize', '100% auto')
            ;
        }
    });
});

another possibility would be to use media queries. set the image size to be say..1280x450 and then use a media query of background-size:100% auto; for all window sizes over 1280px wide.

there is some code which also handles image resizing with IE, however ive admittedly had limited success with it...

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;

if anybody has any add ons or fixes for the above then feel free to contribute.

hope this helps someone out there...

For background images, I usually set a minimum width for the html tag which would be the original width of the image or less, this stops the image from shrinking too far.

Put image in div and give size to it. Apply following property to img tag

background-repeat: no-repeat;
background-size: 100% 100%; 

You seem to be looking for CSS3's background-size property. You can constraint the minimum size to the container, if you know that the images are 1200x1200.

I don't believe it'll work on IE though, so it might not be an option for you.
In that case, I suggest you take a peek at http://www.markschenk.com/cssexp/background/scaledbgimage.html