28173 sujets

CSS et mise en forme, CSS3

Background-repeat stoppée par une DIV !?

Salut à tous,

un ptit problème que je n'arrive pas à résoudre, probablement pasq je n'utilise pas la bonne méthode Smiley biggol
je souhaite répéter 2 backgroud images left_REPEAT.jpg et right_REPEAT.jpg verticalement à gauche et à droite (elle mm situées derrière 2 backgroud images left_NO-REPEAT.jpg et right_NO-REPEAT.jpg).
A gauche cela fonctionne en ajoutant height:2000px; mais cela fait apparaître une scrollbar !
A droite l'image descend jusqu'à la limite verticale de la DIV #container au lieu descendre jusqu'en bas de la page !

Bref je fais appel à vous pour me guider vers la solution adéquate Smiley cligne

http://img10.hostingpics.net/pics/249646A01.jpg

CSS
body  {
	margin: 0; 
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #CCC;
}
#leftREPEAT {
	background-image: url(IMG/FOND_left_REPEAT.jpg);
	background-repeat: repeat-y;
	height:2000px;
	background-attachment:fixed;
}
#leftNO-REPEAT {
	background-image: url(IMG/FOND_left_NO-REPEAT.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
#rightREPEAT {
	background-image: url(IMG/FOND_right_REPEAT.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
#rightNO-REPEAT {
	background-image: url(IMG/FOND_right_NO-REPEAT.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}
#container  {
	width: 500px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	height: auto;
	background-color: #999;
}


HTML
<body>

<div id="leftREPEAT">
<div id="leftNO-REPEAT">
<div id="rightREPEAT">
<div id="rightNO-REPEAT">

<div id="container">
  <img src="IMG/Fond_images.jpg" width="500" height="500" />
</div><!-- #container -->

</div><!-- rightNO-REPEAT -->
</div><!-- rightREPEAT -->
</div><!-- leftNO-REPEAT -->
</div><!-- leftREPEAT -->

</body>

Modifié par rougenuit (29 Oct 2010 - 12:23)
merci pour ton aide Mecho Smiley cligne

Aprés bidouillage des ces colonnes factices, je n'y vois pas toujours pas de solution lorsque le contenu central est inférieur à la hauteur de la fenêtre. En effet les colonnes extérieures s'adaptent toujours au contenu central ! Ou alors j'ai raté un épisode Smiley biggol

Sinon pour supprimer la scrollbar il me reste cette solution assez bof
body  {
	overflow: hidden; }


Si tu as d'autres idées... n'hésites pas Smiley cligne
Modifié par rougenuit (02 Nov 2010 - 13:01)
Sujet clos
Aller à