How to use CSS media query to scale background-image to viewing window

Question

I have this large image as a background for a website:

body {
    background: #000 url(/assets/img/living.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

But on my mobile device (iPhone 4S - Safari), the background-attachment: fixed does't seem to be having the same effect as it would on a desktop. Why is that and can I use a media query to fix that?

Answer 1

Try this - you don't always need a media query to handle background images. The CSS3 background-size:cover property handles all that quite well on its own. The below works well for me on all mobile devices I've tested - especially well on Android, mobile version browsers and all tablets.

body { 
    background-image: url(/assets/img/living.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}