Background-attachment: fixed ne fonctionne pas sur mobile

Version imprimable

Bonjour à tous,

Je suis en train de créer un site et je suis confronté à un problème : Mon background-attachment: fixed ne fonctionne pas sur mobiles et tablettes.

Je vous ai fait deux vidéos provisoires pour vous montrer le problème, une prise sur Mac et une prise sur iPad.
Le résultat souhaité est sur la vidéo prise sur Mac.

Mac : https://www.youtube.com/watch?v=aTUp6nOQDiw

iPad : https://www.youtube.com/watch?v=3IEeEOt-0Xg
Code:

1 2 3 4 5 6 7 8 9 10 11 body { background-image: url("../../images/mur.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
A savoir que dans le futur, "mur.jpg" sera du code SVG directement dans le CSS pour des raisons de performance (je ne sais pas s'il y a des choses à savoir en plus concernant mon problème)

Je vous remercie

08/10/2021, 13h14
jreaux62
Bonjour,

problème de compatibilité (Safari) :
- https://developer.mozilla.org/fr/doc...es_navigateurs
08/10/2021, 13h34
jeicko

Merci pour ta réponse.

Est-ce qu'à ta connaissance il y aurait un moyen en CSS de contourner cette incompatibilité pour obtenir le même effet ?
08/10/2021, 13h59
jeicko
J'ai trouvé la solution sur internet grâce à ton aide, merci de m'avoir aiguillé.

Voici le code adapté à mon utilisation pour contourner le problème :

Il faut mettre une div à l'intérieur du body

Code:

<div id="bg"></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 #bg { background: url(../../images/mur.jpg) top; height:100%; width:100%; position:fixed; background-position: center; background-size: cover; background-repeat: no-repeat; }
Si j'ai bien compris les explications, ios doit en quelque sorte redimensionner la taille du corps pour qu'elle soit aussi grande que le contenu. Je ne suis pas sur d'avoir tout compris mais ça fonctionne.

Une solution : utiliser une div en position:fixed

Code:

1
2
<body>
<div id="bodyFixed"></div>

Code:

1
2
3
4
#bodyFixed { 
  position:fixed; overflow:hidden; top:0; left:0; right:0; width:100vw; height:100vh; 
  background:url(https://us.123rf.com/450wm/rawpixel/rawpixel1903/rawpixel190305535/124220058-vecteur-de-fond-textur%C3%A9-brique-gris-fonc%C3%A9.jpg) top center repeat;
}

[EDIT] oups... le temps d'écrire le code...

08/10/2021, 14h56
jeicko

Merci ;)
08/10/2021, 17h05
NoSmoking
Bonjour,
pour tout savoir, il existe également Can I use..., dans ton cas : CSS3 Background-image options, avec annotation des « Known issues » et autres ...

Concernant le palliatif il est une façon, qui m'apparaît comme plus « élégante » qui consiste à utilser le pseudo-élement ::before sur le <body>.
On n'ajoute donc pas d'élément, il suffit de modifier le CSS pour que cela soit pris en compte par tous les fichiers HTML concernés.

Cela donne quelque chose comme
Code:

1 2 3 4 5 6 7 body::before { content: ""; position: fixed; width: 100vw; height: 100vh; background-image: url(adresse-de-l-image); }
...le reste étant éventuellement à définir suivant l'image.
08/10/2021, 18h06
jeicko

NoSmoking, je viens d'essayer ta solution et elle fonctionne tout aussi bien.
J'ai modifié mon code pour adopter ta solution qui est un peu plus propre effectivement.

Merci !