How do I stop an image from shrinking after it has reached a certain point?

Question

My background image is this big: 1920 × 1200

Here is how I am displaying it:

html {
    background: url("back.png") no-repeat top left fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This works fine but now I want to be able to make it stop from re-adjust after reaching a certain pre-defined range? Like maybe when the image has shrank to reach 1300 x 500 it should stop.

How can I achieve this?

Answer 1

Have you checked out the min-width and max-width properties?

When you start messing with the width, make sure you set the height to 100% to maintain the aspect ration.