Taille du fond pour les appareils mobiles

Question

Je suis en train de faire une image de fond pour les appareils mobiles tels que:

body { 
    background: url("/resources/img/background2.jpg") no-repeat fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100% 100%; 
} 

dans les outils de développeurs Chrome, il semble bien, mais sur un vrai dispositif (avec une plus petite taille de l'écran) ce ne est pas. Pourquoi est-ce, et comment je peux résoudre ce problème?

instantanés:

Answer 1

Vous voulez une image de fond réactif qui peut se réduite sur les smartphones. Utilisez ceci:

background-image:url('/resources/img/background2.jpg'); 
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 2

Que penses-tu?

background-image: url("/resources/img/background2.jpg"); 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center center;