L'image d'arrière-plan ne s'affiche pas sur les tablettes et les téléphones mobiles

Question

L'image d'arrière-plan s'affiche parfaitement sur PC et sur simulateur (tablette et téléphone), mais elle n'apparaît pas sur le téléphone ou la tablette.

Code

div#photo_break { 
    @include viewport-unit(height, 28vw); 
    background-image: url('<img>'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-position: center top; 
    background-attachment: fixed; 
    z-index: 99999; 
} 

website

Comme vous pouvez le voir sur cette photo, en Chromes simulator l'image est affichée.

La taille de l'image est pas vraiment grand, ou est-ce?

Answer 1

mobile et tablet browsers ne supportent pas background-attachment: fixed.

changer cela, résolu le problème

Answer 2

Nice site. : D Essayons de résoudre votre problème.

Assurez-vous de ne pas avoir ce code CSS dans une requête multimédia, car il pourrait bloquer ce contenu.

Vous pouvez également essayer d'ajouter une nouvelle requête multimédia avec la même CSS que celle que vous avez pour mobile, comme ceci: @media (min-width: 481px) { }.

Nettoyez le cache de votre navigateur mobile avant de recharger le site.

Answer 3

Votre image d'arrière-plan a une largeur de 12 000 pixels. Cela prend beaucoup de temps à charger, je suggérerais de faire noircir l'arrière-plan d'un parent div à l'intérieur de l'en-tête, puis de mettre une image de la personne comme arrière-plan de l'élément dans ce conteneur si cela a du sens. Sauvegardez vos données d'utilisateurs mobiles!