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?
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
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 '/'.
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
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.
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;
}
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.
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;
}
Ajouter une couleur de fond a résolu mon problème
background-color: #F4F4F2;
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).
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.