Background-attachment: fixed ne fonctionne pas sur mobile

**jeicko** · 08/10/2021, 11h12

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 :

iPad :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**jreaux62** · 08/10/2021, 13h14

Bonjour,

problème de compatibilité (Safari) :

https://developer.mozilla.org/fr/doc...es_navigateurs

**jeicko** · 08/10/2021, 13h34

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 ?

**jeicko** · 08/10/2021, 13h59

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**jreaux62** · 08/10/2021, 14h04

Une solution : utiliser une div en position:fixed

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**jeicko** · 08/10/2021, 14h56

Merci

**NoSmoking** · 08/10/2021, 17h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**jeicko** · 08/10/2021, 18h06

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 !

Background-attachment: fixed ne fonctionne pas sur mobile

CSS

Discussions similaires

Partager

Partager