CODEWITHSUNDEEP
cssmedia-queries
Owl
Owl

Reputation: 689

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

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!

Upvotes: 0

Views: 2697

Answers (3)

Satyam Singh
Satyam Singh

Reputation: 188

Use This Code To fix your problem. Once I also stuck with the same problem and this code help me and I hope it will help you too.This will work surely.

 @media only screen and(max-width:600px){
       body{
            background-image: url(satyam01.jpg);
           background-size: cover;
            background-position: center;
        }
    }

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28505

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.

Upvotes: 3

Akki619
Akki619

Reputation: 2432

If your design is fluid, you can target lower resolution like

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

width needs to be managed a/c to business need.

Upvotes: 0

Related Questions