Scaling background and minimum size

Question

Hi, I have large background images of 1200 by 1200, what I would like to do is expand the images when the user resizes the browser but restrains it, so it never scales less than the size of the original.

There are many scalable bg images there, but I can not find what to do, any help would be appreciated.

Answer 1

Here is exactly what you are looking for:

background-size: cover; 

Answer 2

The following combination of CSS + Javascript + JQuery 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') ; } }); }); 

Answer 3

Another possibility is to use media queries. set the image size to say. 1280x450, and then use the background media query: 100% auto; for all windows larger than 1280 pixels.

there is some code that also handles image resizing using IE, however, admittedly, it has had limited success ...

 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 anyone has any additions or corrections to the above, then feel free to contribute.

hope this helps someone out there ...

Answer 4

For background images, I usually set the minimum width for the html tag, which would be the original image width or less, which stops the image too much.

Answer 5

Put the image in a div and specify its size. Apply the following property to the img tag

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

Answer 6

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

I do not believe that this will work on IE, but perhaps this is not an option for you. In this case, I suggest you take a look at http://www.markschenk.com/cssexp/background/scaledbgimage.html