web-dev-qa-db-fra.com

L'image de fond ne s'affiche pas dans Safari

Je travaille sur un design réactif et la classe "bgMainpage" a une image d’arrière-plan mais elle ne s'affiche pas sur Safari sur tous les appareils. J'ai appliqué la couverture de taille d'arrière-plan car c'est ce que le client veut. J'ai ajouté des CSS spécifiques à un navigateur et je ne sais pas quoi faire pour que cela apparaisse également dans Safari. Chrome, FF, IE montrent bien l'image. Des idées ?

Project Link

CSS: 

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
htmlcsssafariresponsive-design
19
NegativeSpark

J'ai converti le format d'image de JPEG au format GIF et cela a fonctionné. Le CSS final est donc:

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
2
NegativeSpark

Safari a un bogue apparent qui empêche l'affichage d'images jpg/JPEG d'un certain type dans les arrière-plans si certains critères sont remplis. Pour une utilisation en ligne, il existe un type d'image jpg appelée JPEG progressif. Les images jpg standard encodent les données d'image de haut en bas et vous pouvez les voir se charger de cette façon en ligne. Le format JPEG progressif, en revanche, code l’image de plus en plus détaillée. Cela signifie que le chargement est flou au début, puis devient plus clair. Certaines personnes pensent que cela a l'air mieux en ligne, c'est pourquoi il est utilisé. Certains optimiseurs d'images vont automatiquement rendre jpgs progressif pour une utilisation en ligne. 

D'après mon expérience, Safari n'affiche pas les fichiers jpgs lorsque certains des critères suivants sont remplis:

  • l'encodage progressif est utilisé
  • l'image est un fond (pour un élément ou la page entière)
  • l'image est grande (je ne sais pas exactement la taille, mais j'ai eu des problèmes avec des images d'une largeur de plusieurs milliers de pixels)
  • éventuellement d'autres choses, je n'ai pas complètement exploré ce bogue

Je n'ai pas été capable de recréer cela dans aucun navigateur, sauf Safari. 

Pour résoudre ce problème, vous pouvez soit ré-enregistrer l'image en vous assurant qu'elle n'est pas au format progressif (photoshop, etc., avoir un sélecteur pour cela), ou utiliser un autre format (gif, png, etc.).

30
JC Hulce

J'ai le même problème et j'ai résolu ce problème en changeant:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

à:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

et cela fonctionne bien dans le safari maintenant :)

13
Mehar

Avait le problème et trouvé cela, mais rien n'a fonctionné. Finalement, nous avons découvert que l’URL () manquait de ses parenthèses fermantes. Même sans cela, les images d'arrière-plan fonctionnaient sous IE 9+, Edge, Chrome et Firefox. Seul Safari, parmi les navigateurs testés, n'affichait pas d'images d'arrière-plan.

Ajouté le) et tout a fonctionné.

6
Bjørn Stenfeldt

J'ai eu le même problème avec Safari. J'ai essayé d'autres solutions, la seule chose qui a fonctionné pour moi était de supprimer un z-index négatif .

5
Jonathan

S'il vous plaît essayez avec le code suivant, vous devrez peut-être changer la largeur et la hauteur et l'URL.

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

1
Vaibhav Sharma

Essayez de changer ou de supprimer :::

background-attachment:fixed;

ça marche pour moi en safari .....

1
Balvant Ahir

Je viens de rencontrer ce problème et aucune des solutions proposées ne résout ce problème. J'ai résolu mon cas et cela était dû à des protocoles mixtes: le site était https alors que les images bg étaient http. Le chargement des images a donc échoué en silence et ne s’affiche pas uniquement sur Safari, sur MacOS et uniquement pour certains utilisateurs. 

1
Sandro

peut-être parce que l'image est mal enregistrée. J'ai eu ce problème une fois pour et j'ai dû changer ce qui suit: 

ouvrez votre photo dans photoshop et enregistrez-la "cmyk", cette option doit être modifiable dans la vue, configure-proof, cmyk-colors (désolé, mon photoshop est entièrement en allemand)

j'espère que cela t'aides

1
caramba

J'ai eu le même problème. Mon image était progressive et comme JC Hulce a répondu, Safari a un problème avec ça.
Pour vérifier si votre image est progressive, allez sur: techslides.com/demos/progressive-test.html .
Pour réparer, ouvrez simplement dans photoshop et allez dans le menu fichier-> enregistrer pour le Web

1
Zeev G

J'avais un problème similaire mais je n'avais aucun contrôle sur l'image car elle était générée par tumblr. Les suggestions progressives ne fonctionnaient donc pas. J'ai vérifié deux fois mon code et tout ce qui avait été suggéré, puis j'ai finalement essayé de définir une MIN-HEIGHT sur la div avec l'image d'arrière-plan et Safari l'a finalement affiché comme tous les autres navigateurs. J'espère que cela vous aidera à vous débarrasser de quelques maux de tête. 

0
OneFatCat

Il semble que le safari n'aime pas:

background-attachment: fixed;

Mais je veux toujours avoir une parallaxe, en particulier sur les ordinateurs de bureau. Ma solution a donc été de supprimer ce qui précède de la classe .header et de le placer sous:

@media(min-width: 1334px)

Cela a mon image affichée sur la plupart des iPhones à travers l'iPad. Cela ne couvre tout simplement pas l'iPhone 6 Plus. La résolution de ce téléphone entre en territoire de bureau. 

0
theniceninja

Essayez ce code.

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
0
sarfaraj

J'ai eu le même problème et aucune des autres solutions ici n'a résolu le problème. Pour moi, j'avais une image de fond sur une ancre enveloppée dans une div. Tous les navigateurs traitaient parfaitement l’image d’arrière-plan, à l’exception de Safari 6. Le correctif pour moi était de définir position: relative sur la div et position: absolute sur le lien d’ancrage.

0
dubious