7

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?

greener
  • 4,989
  • 13
  • 52
  • 93
  • What happens exactly ? Can you post a link to investigate ? – Aequanox Mar 28 '13 at 17:01
  • The mobile version of Safari probably doesn't support `background-attachment: fixed`. Have a look at http://stackoverflow.com/questions/3011226/using-background-attachmentfixed-in-safari-on-the-ipad – gaynorvader Mar 28 '13 at 17:01

1 Answers1

20

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%; 
}
Gatsby
  • 745
  • 9
  • 13