web-dev-qa-db-fra.com

L'image d'arrière-plan ne s'affiche pas sur iPad et iPhone

Je souhaite créer une section avec un arrière-plan le couvrant dans une page Web mobile. J'utilisais donc le code CSS suivant:

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

L'arrière-plan s'affiche correctement sur Android (Chrome, Firefox ...), mais pas du tout sur iPhone ou iPad (Safari, Chrome iOS ...). J'ai essayé de définir ces propriétés en utilisant jQuery lorsque le DOM est prêt, mais pas de chance. J'ai lu que la taille pouvait poser un problème, mais que l'image représente environ 700 Ko (1124x749px), elle doit donc respecter les règles Safari Web Content Guide Quel est le problème?

iphoneioscssipadbackground
9
Jorge Con Jota

Il y a un problème avec votre règle CSS:

Vous utilisez la notation abrégée dans laquelle la propriété background-size- vient après la propriété background-position- et doit être séparé par un /.

Ce que vous essayez de faire est de définir la position, mais cela échouera car auto n'est pas une valeur valide pour cela.

Pour que cela fonctionne en notation abrégée, il doit ressembler à ceci:

background: url([URL]) 0 0 / auto 749px;

Notez également qu'il existe une valeur appelée cover, qui peut être appropriée et plus flexible ici:

background: url([URL]) 0 0 / cover;

Le support pour background-size dans la notation abrégée n’est pas très large non plus, car il est pris en charge par Firefox 18+, Chrome 21+, IE9 + et Opera. Il n'est pas du tout pris en charge dans Safari. À cet égard, je suggérerais de toujours utiliser:

background: url("background1.png");
background-size: auto 749px; /* or cover */

Voici quelques exemples et une démo pour démontrer ce comportement. Vous verrez que Firefox, par exemple, affiche toutes les images sauf la première. Safari par contre ne montre que le dernier.

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

Démo

Essayez avant d'acheter

Lectures supplémentaires

Référence MDN CSS "background"
Référence CSS MDN "background-size"

<'taille du fond'>
Voir taille-fond . Cette propriété doit être spécifiée après background-position, séparée par le caractère '/'.

12
insertusernamehere

Mon problème était que iOS ne supporte pas background-attachment: fixed. Supprimer cette ligne a fait apparaître l'image.

Il semble cependant qu'il existe des solutions de contournement pour une image d'arrière-plan fixe: Comment répliquer une pièce jointe en arrière-plan fixée sur iOS

11
yndolok

J'espère que cela aidera quelqu'un dans le désespoir ... Dans mon cas, c'était la taille de l'image qui était trop grande, donc l'iPad ne le chargeait pas (et c'était juste en fait) 

La diminution de sa taille et de sa qualité a résolu le problème de chargement.

7
Alexandre Bourlier

Le problème n'a pas été résolu lorsque j'ai essayé d'utiliser correctement l'arrière-plan. Cela fonctionne lorsque je scinde la propriété background: 

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}
6
Jorge Con Jota

Réduisez la taille de l'image si rien d'autre ne fonctionne: iOS n'aime pas les grandes tailles d'image sur un mobile et n'affiche pas l'image si elle est trop grande.

Grands fondamentaux de @insertusernamehere! Peu importe ce que je faisais, je ne pouvais pas obtenir mon image… jusqu'à ce que je revienne à l'essentiel. La taille de l'image était trop grande et l'iPhone n'aimait pas charger une image de cette taille, plus de 700kbs. Donc, je l'ai réduit à 32ko et nous étions en action.

2
L X

L’image d’arrière-plan disparaît du navigateur IOS (iPhone/iPad) . Il s’agit du code que j’ai utilisé:

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}
1
Rizwan Akram

Ajouter une couleur de fond a résolu mon problème

background-color: #F4F4F2;
0
dam1

Je n'ai vu personne spécifiquement le dire, mais il faut aussi définir la largeur. Donne depuis, puisque je règle la taille de l'arrière-plan sur "contenir" - il doit savoir quelles sont les dimensions du conteneur.

Une fois que j'ai fait, l'arrière-plan a rendu comme prévu.

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

Remarque: L'URL d'arrière-plan doit être définie pour les deux points d'arrêt afin de fonctionner pour iPhone 5 (iOS7).

0
josh1978

J'ai eu un retrait de texte négatif qui a jeté mon image d'arrière-plan de la page, donc couleur: Transparent c'est alors.

0
Carol McKay