28172 sujets

CSS et mise en forme, CSS3

Problème de background pour faire de la parallaxe

Bonjour,

J'essaye de mettre en place sur mon portfolio, un background composé de plusieurs images pour créer un effet de parallaxe.

L'effet marche bien, toute la structure du site marchait bien, mais voila quand j'ai voulu associer les deux les problèmes ont commencés.

Explications :

La parallaxe est crée grâce à deux div qui englobent tout le contenu :

<body>

       <div id="nuages">
            <div id="montagnes">
                   <div id="header"></div>
                       <div id="contenu"></div>
            </div>
      </div>
</body>


Le CSS de ces div( j'ai essayé deux syntaxes) : 

#iceberg{

        background-image: url("http://www.yannlegallou.com/PortfolioV2/images/body-bg.jpg");
        background-repeat: repeat-y ;
        background-position: center;
        background-color: #1A2732;

}
#nuages{background : url("http://www.yannlegallou.com/PortfolioV2/images/outer-bg.png") center -330.6px fixed;}


Je veux mettre l'effet de parallaxe uniquement sur la page d'accueil, qui est composée de cases avec des positionnements en float.

Mon Problème :

Après pas mal de tests et de fouillages du net, j'en ai conclu que c'est le positionnement en flottant des cases qui pose problème. Le background ne s'affiche que dans le header, alors que les div iceberg et nuages qui contiennent les images du background font la même hauteur que le body. Je vous joint une image pr illustrer ces mots :

upload/38193-Imprimport.jpg

J'ai essayé d'enlever le float et de trouver une autre manière de disposer ces cases, en faisant une liste par exemple, ou en mettant un display:inline, de fixer la largeur, mais rien n'y fait.

Quand j'enlève le positionnement flottant des cases, le background s'affiche parfaitement.
Voila l'adresse de la page d’accueil de mon portfolio :www.yannlegallou.com, vous pouvez masquer l'attribut float:left sur firebug pour voir l'aspect final du background que je recherche.

Merci de prendre un peu de temps

Bonne journée
Modifié par yannLG (06 Jun 2011 - 00:21)
Bonjour,

j'ai vu que tu as placé ton attribut " clear : both; " sur ton #content, mais c'est en fait a l'intérieur de celui-ci que tu dois faire un "clear : both;"

Une solution :
- Tu ajoutes un " <div style="clear:both;"></div> " après ton dernier "div.case", et tout devrait rentrer dans l'ordre.


PS : j'aurai pensé, pour faire plus propre, qu'ajouter une classe " lastUnit " à ton dernier "div.case" et mettre un " clear:left; " sur #content div.lastUnit l'aurait fait, mais il semble que non... si quelqu'un voit pourquoi.
Modifié par n3k0 (06 Jun 2011 - 09:25)
Merci a vous deux de vous être penchés sur mon histoire, je sais pas ou vous trouvez le temps pour faire tout ça, mais chapeau!

J'ai suivi tes conseils N3ko et j'ai ajouté <div style="clear:both;"></div> " après mon dernier "div.case" et tout marche nikel, je vais essayer de trouver une solution pour ne pas faire une div vide, mais le principe est la.

ptitvincent, oui je suis vraiment minutieux je place mes éléments au dixième du pixel près... Smiley err

Bonne journée à vous
Sujet clos
Aller à