Responsive repeatable background image for body, change in media query to cover

Question

I a using the gridless CSS framework for my page.

Body element is used as a wrapper, and I have a background image for that wrapper, which repeats downwards.

Now the problem is, to make this image responsive. Here is the css

html {
    height: 100%;
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color:#5FB7C0;
}
body {
    margin: 0 auto;
    min-height: 100%;
    max-width:960px;
    width:90%;
    color:#fff;
    background: url('../img/background.jpeg') repeat-y; 
}

The background jpeg is 960 pixel wide. I thought of making a media query, which makes the background image as a cover when scaling down. I change also the same image but double height, so the background is not scaled up on height.

@media only screen and (max-width: 1100px) { 
body {
    background: url('../img/mobilebg.jpeg');    
    background-size:cover;
}
}

But now when I scale down, the background image is not scaled down to smaller sizes if the height is more than the width.

The problem is, the cover property looks that the height is equal to the image, but I need it to look that the width is equal. Also a background size cover which repeats y.

How can I make the image correctly as a repeatable? It can be fixed, but should always look like the picture, but without the spaces left and right if smaller size

Thanks so much!

Answer 1

Try this (I used 959 px, because 1100px wouldn't make sense If the image is 960px)

@media only screen and (max-width: 959px) { 
body {   
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}
}

Fiddle that presents sort of what this does.