Comment utiliser les CSS media requête à l'échelle l'image de fond d'écran de la fenêtre de visionnement

J'ai cette grande image comme arrière-plan pour un site web:

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%;
}

Mais sur mon appareil mobile (iPhone 4S - Safari), le background-attachment: fixed ne semble pas avoir le même effet comme il le ferait sur un ordinateur de bureau. Pourquoi est-ce et puis-je utiliser une requête de média pour résoudre ce problème?

Ce qui se passe exactement ? Pouvez-vous poster un lien pour enquêter ?
La version mobile de Safari n'a probablement pas en charge background-attachment: fixed. Jetez un oeil à stackoverflow.com/questions/3011226/...

OriginalL'auteur greener | 2013-03-28

  1. 18

    Essayer ce - que vous n'avez pas toujours besoin d'un media query pour gérer les images d'arrière-plan. Le CSS3 background-size:cover propriété gère tous très bien sur son propre. Ci-dessous fonctionne bien pour moi sur tous les appareils que j'ai testé - en particulier bien sur Android, la version mobile de navigateurs et tous les comprimés. 

    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%; 
}
    Malheureusement, couvrir et fixe no-repeat arrière-plan ne fonctionne pas sur tablette Android, mode portrait.
    ajouter du code html{height:100%,width:100%} dans le css.
    arp merci 🙂
    wow juste wow. Merci! Qui a résolu mon problème avec les images de fond ne s'affichant sur mobile constamment!

    OriginalL'auteur Gatsby

  2. 1

    Arps réponse a fonctionné pour moi. Devrait être plus élevé!

    Ajouter html{height:100%,width:100%} dans votre css.

    OriginalL'auteur Steven