scaling background and min size

Question

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 can find that do this, any help would be appreciated.

Answer 1

background-size: cover;

there you go

Answer 2

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')
            ;
        }
    });
});