Bonjour à tous,
je cherche de l'aide car je suis confronté à un problème que je n'arrive pas à résoudre.
Je dispose d'une image et Je souhaite réaliser un site avec cette image de fond : http://hpics.li/e1c2123. Mais j'aimerais que le contenu que je vais insérer dans la page, plus ou moins long suivant la page, reste entre la partie haute et basse (en dessus du halo de lumière et au dessus du fond de l'eau) et que la partie du milieu grandisse ou rétrécisse suivant la longueur de mon contenu.
Pour ça, j'ai découpé en trois parties l'image, le haut et le bas qui doivent rester fixe et le milieu qui doit s'adapter. Mais, c'est d'une part pas très beau, et en plus, ça ne fonctionne absolument pas...
Mon code html
<DOCTYPE html>
<html>
<head>
<meta charset ="utf-8" />
<link rel="stylesheet" href="style_index.css" />
<title>Page d'accueil</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre">
<img src="underwater_haut.jpg" alt="Bannière haute" id="banniere_haut"/>
<h1>Page d'accueil</h1>
</div>
<nav>
<ul>
<li><a href="#">??</a></li>
<li><a href="#">??</a></li>
<li><a href="#">??</a></li>
</ul>
</nav>
</header>
<article>
<img src="underwater_redi.jpg" alt="Image du milieu" />
<p>
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum id neque sed faucibus. Mauris nibh lacus, semper eget neque malesuada, vestibulum facilisis sem. Morbi faucibus, nunc cursus suscipit convallis, enim purus accumsan magna, nec ultricies purus eros ac leo. Nam sodales, erat vitae consectetur luctus, augue ligula fringilla nunc, ut commodo nibh leo at lacus. Sed sed venenatis velit, vel commodo orci. Pellentesque malesuada erat vel nisl mattis viverra. Morbi consequat feugiat ipsum, congue accumsan risus pretium ut. Nam congue dui in sapien egestas, at molestie nisi sagittis. Ut id ullamcorper ipsum. Proin vitae mauris quis eros lacinia porta efficitur a felis. Proin gravida commodo risus, nec volutpat tortor tincidunt non. Mauris id justo purus. Etiam condimentum neque a dignissim venenatis.
<br />Etiam ex mi, pretium eu aliquet sit amet, pulvinar et sem. Suspendisse id lectus ac massa mollis lacinia. Sed feugiat suscipit urna vitae semper. Suspendisse quis rutrum eros. Suspendisse neque mi, suscipit non lectus ut, vulputate viverra enim. Vestibulum tristique nec lacus non faucibus. Sed feugiat augue at magna elementum, non consectetur magna pharetra. Etiam vestibulum libero eu lobortis congue. Nam fermentum a lacus porta volutpat.
<br />
Sed lacinia lacinia velit, non varius ligula imperdiet sit amet. Phasellus tincidunt, ligula luctus accumsan ultricies, ipsum diam rhoncus leo, vehicula condimentum massa quam et felis. In id luctus dolor. Sed tincidunt libero at erat lobortis interdum et non leo. Nulla eros urna, tempus eu libero nec, ultrices ullamcorper felis. Sed mattis ligula eu dui vestibulum vulputate. Nulla feugiat nibh egestas ligula scelerisque vestibulum. Sed sit amet ipsum porta, vestibulum nisl non, ornare erat. Vestibulum imperdiet efficitur eros commodo pulvinar. Suspendisse iaculis arcu ac tempus suscipit. Integer pulvinar tincidunt turpis ut dapibus. In nec dolor a elit ornare sodales vitae eu ante. Nullam vel purus sed tellus maximus scelerisque. Duis sapien lectus, dictum ut consectetur non, fermentum sodales sapien. Pellentesque pulvinar eros ac suscipit ultricies.
<br />
Donec condimentum venenatis efficitur. Duis tellus erat, sagittis sed pretium ac, mattis vitae enim. Aliquam turpis nisi, ultrices ut porttitor at, finibus at velit. Vivamus nec elementum sem. Nunc id dui vel arcu venenatis efficitur vel sit amet mauris. Pellentesque quis tortor et risus tincidunt vehicula eget in risus. Proin commodo consectetur mi, eu facilisis justo dictum id. Suspendisse risus lorem, eleifend quis ullamcorper quis, blandit non velit. Fusce suscipit nisi ut nibh imperdiet, a dapibus mi imperdiet. Donec metus lorem, lobortis et dictum a, dictum vehicula nibh. Sed sagittis ex justo, eget semper orci volutpat sodales. Fusce tempor scelerisque diam quis posuere. Pellentesque sed sollicitudin metus. Sed auctor, metus eu elementum vulputate, nisi turpis elementum velit, id dictum eros magna non justo. Sed porta accumsan sollicitudin.
<br />
Integer blandit laoreet vehicula. Proin varius est eget eleifend blandit. Proin dictum ex et accumsan rutrum. Maecenas vitae velit bibendum, vehicula dui vel, imperdiet urna. Sed in erat quam. Vestibulum eu est sed urna varius ultricies eu vel urna. In massa erat, interdum nec risus id, aliquam mollis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue euismod metus eget faucibus. Sed lacinia, risus convallis lobortis eleifend, augue felis euismod purus, ut rutrum ante est ac eros.
<br />aecenas porttitor turpis orci, sit amet condimentum leo bibendum quis. Nam sollicitudin gravida sem, ut faucibus dui. Maecenas porttitor urna sapien, quis varius nulla cursus sit amet. Proin hendrerit porttitor tempus. Aenean elementum elit enim, vel ultrices eros tincidunt at. Etiam sodales augue vel tincidunt fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer turpis nunc, vulputate non turpis eu, tempor ultricies nisl. Nulla a eros sed magna tincidunt tristique laoreet id metus. Suspendisse vitae augue elementum turpis pretium fermentum. Suspendisse potenti. Quisque turpis tellus, laoreet vitae leo et, tempus elementum augue.
Morbi lobortis, sapien id tristique aliquam, purus justo vehicula tortor, ac dignissim ligula nisl quis nunc. Suspendisse vehicula risus sodales condimentum pellentesque. Quisque venenatis dignissim justo non volutpat. Donec faucibus, nisi nec lacinia tempus, nisl quam lacinia diam, vitae porta augue mauris eu nisl. Nulla hendrerit elit leo, id sagittis est semper id. Praesent et tristique ex. Aenean vulputate ipsum vehicula venenatis fermentum. Nulla eget nibh non lectus placerat hendrerit laoreet sit amet felis.
<br />
Donec erat elit, rhoncus eu aliquam ac, sodales ut sapien. Fusce volutpat lacus in vulputate gravida. Mauris consequat posuere tortor, at vestibulum nisl suscipit nec. Nam porttitor, ante eu semper rutrum, libero nisl vehicula arcu, vitae pharetra nisi est sed libero. Donec sodales consectetur augue non venenatis. Proin erat enim, vulputate eget gravida aliquet, maximus nec dui. Quisque condimentum eu augue non consectetur. Proin sit amet mauris in ligula feugiat aliquet. Quisque mauris eros, pulvinar ut euismod ac, feugiat quis tellus. Nam dapibus elit tortor, sed consectetur quam sollicitudin quis. Etiam sed lectus tristique, volutpat augue vel, dictum magna. Cras vestibulum aliquet sollicitudin. Nam pretium eget nunc at rutrum. Nunc dictum in elit vitae vehicula. Pellentesque sit amet mauris lacinia, rutrum odio non, fermentum elit.
<br />
Mauris congue enim quis finibus condimentum. In laoreet lacus eu elit semper commodo. Mauris interdum ac nunc nec tempus. Vivamus sodales metus vitae venenatis mollis. Aliquam erat volutpat. Vivamus pellentesque eu sem ac molestie. Nulla convallis suscipit ipsum ac molestie.
<br />
Ves<br />tibulum luctus lacus id arcu ultricies, a congue tellus tempor. Duis at tortor ac leo ultrices rutrum id id ante. Nunc vehicula efficitur ex convallis gravida. Nulla in sapien vel est efficitur ornare. Phasellus id neque nec erat facilisis tristique. Donec sagittis ligula sed ex pellentesque, rhoncus sodales eros ultrices. Etiam mollis semper risus, sollicitudin commodo velit finibus ac. Nulla nec justo in libero finibus suscipit eget eu mi.
<br />
Quisq<br />
Curabitur lobortis sollicitudin sodales. Ut consequat elementum augue, id aliquet augue vulputate eu. Vivamus quis dictum nibh. Aenean sit amet metus lectus. Nullam nec arcu arcu. Proin vestibulum leo et rutrum ultrices. Nam congue imperdiet interdum.
</p>
</article>
<footer>
<img src="underwater_bas.jpg" alt="Image du bas" />
</footer>
</div>
</body>
</html>
et le CSS
header
{
position: fixed;
top: 0px;
right: 0px;
background-size: cover;
}
footer
{
position: fixed;
bottom: 0px;
right: 0px;
}
#milieu
{
position: absolute;
right: 0px;
}et les trois images :
http://hpics.li/50f845f http://hpics.li/3bb3743 http://hpics.li/e362bb9
Voilà, si vous avez une piste pour m'aider, je suis preneur de tout conseil.
Merci !
perok68
4 réponses
Tu peux fixer ton image et mettre cover pour que il prenne toujours toute la page et si tu veux que le texte reste au dessus d'un certaine point alors fixe une taille a une div et laisse le contenu s'afficher seulement dans la div
body{
background-image:url(tonimage);
background-attachement:fixed;
background-size:cover;
}
div{
height:400px;
overflow:hidden;
}comme ca quand tu scroll tu aura le text qui ne s'affichera que dans la div qui sera a la bonne place
Merci à vous deux ! :)
Effectivement, je vais utiliser mon image de fond qui va rester fixe et extensible, puisqu'au final mon idée de départ est vachement complexe à réaliser, à cause des différentes couleurs. Si ça avait été un bg-color, il n'y aurait pas eu de soucis
Pour la div, merci pour l'astuce, ça marche bien !
Sujet résolu, donc ;).