Background fixed sur mobile

15 décembre 2017 à 13:55:53

Bonjour à tous,

Je suis sur le développement d'un site qui a plusieurs div avec un background fixed. Ça fonctionne très bien sur desktop mais sur mobile il scroll avec la page. Quelqu'un aurait une solution à ça?

Voici le code :

<div class="cover" style="background: url(images/cover1.png)"><h2>Titre</h2></div>

...

<div class="cover" style="background: url(images/cover2.png)"><h2>Titre 2</h2></div>

.cover{
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	background-position: center !important;
	min-width: 100%;
	min-height: 50vh;
	height: 50vh;
	width: 100%;
	display: block;
	float: left;
	clear: both;
}

Merci de vos réponses !

ChrisLebure

15 décembre 2017 à 14:13:10

Bonjour,

ce background est fixe pour la div, pas pour la page HTML entière, et si il n'y a pas d'overflow dans cette div, à quoi sert de fixer le background? Quand on va scroller la page, la div va remonter avec son background, qu'il soit fixed ou pas, non?

JulienSebag

15 décembre 2017 à 14:26:06

C'est pour créer un effet de parallax, j'ai fait un jsfiddle pour que tu vois https://jsfiddle.net/JulienSebag/orav00h5/1/

-
Edité par JulienSebag 15 décembre 2017 à 14:26:26

ChrisLebure

15 décembre 2017 à 14:34:44

OK pigé, scuse !

mais là je ne peux pas t'aider, désolé !

JulienSebag

15 décembre 2017 à 14:37:43

Haha pas de soucis

Lord Morpheus

15 décembre 2017 à 14:42:14

La parallaxe ne fonctionnera pas pour mobile.

Il te faut du coup retirer le fixed quand tu arrive en version mobile.

Un exemple : https://ihatetomatoes.net/demos/simple-responsive-parallax-website/

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

JulienSebag

15 décembre 2017 à 14:56:32

J'ai pu voir certains sites où ça fonctionnait, t'es sûr que ça ne marche pas?

Lord Morpheus

15 décembre 2017 à 15:11:42

Je n'ai jamais réussi à le faire fonctionner pour mobile. Avant hier encore j'ai intégré un site pour un client avec deux paralax. Impossible de le faire fonctionner en mobile.

J'ai même tenté de le faire sans bibliothèque autre que Jquery, même problématique.

Une simple recherche en anglais te confirmera mes dires : paralax mobile not working

Je suis preneur si quelqu'un a une bibliothèque propre et fonctionnelle sur mobile!

-
Edité par Lord Morpheus 15 décembre 2017 à 15:12:04

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

JulienSebag

15 décembre 2017 à 16:23:42

J'ai essayé un truc, ça fonctionne avec juste du CSS mais c'est un peu bourrin haha https://jsfiddle.net/JulienSebag/nevtgnqt/

Par contre ça ne fonctionne que si tu mets l'image fixée en cover

-
Edité par JulienSebag 15 décembre 2017 à 16:41:55

Lord Morpheus

15 décembre 2017 à 17:50:06

Quid de l'effet si tu rajoute un deuxième paralax du coup?

As tu essayé?

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

JulienSebag

15 décembre 2017 à 19:08:32

Nope fonctionne pas haha