Répétition du background de contenu

Question

Romaric

14 Jun 2007 à 13:31

Bonjour, j'aimerais savoir comment faire en sorte que mon background de contenu ce repète en hauteur, j'ai actuelement mon site qui colle de haut en bas de la page, cela dit le bg du contenu ne ce repete qu'en fonction du texte
inclu dans le contenu, je voudrais donc que ce background de contenu ce repète de header au footer.

Voici ma page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Chez Roma !</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-15" />
	  <link rel="stylesheet" type="text/css" href="styles.css"
	  media="screen" />
</head>
<body>

<div id="global">





<!--         ////////////////////////            Partie header       //////////////////////       -->
				<div id="bgheader">
                <div id="topbarheader">
				</div>	
			<div id="header">
			<div class="texte-header">test</div>
			</div>
			</div>
<!--         ////////////////////////          FIN  Partie header       //////////////////////       -->





<div id="contenu">
<div class="contenu-texte">test de texte</div>
</div>

<div id="bgfooter">
<div id="footer">
<div class="copy">copy</div>
</div>

</div>


</div>
</body>
</html>

Et ma page CSS

html, body {
	margin: 0;
	padding: 0;
	height:100%;
}
Body {
background-color:#ffffff;
margin : 0 auto 0 auto;
}


#global {
position:relative;
background-color:#ffffff;
min-height:100%;
}

#topbarheader {
background-image:url(images/topbarmenu.png);
background-repeat:no-repeat;
width:697px;
height:96px;
}

#bgheader {
background-image:url(images/bg-header.png);
background-repeat:repeat-x;
height:224px;
}

#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
width:697px;
height:236px;
}

#contenu {
background-image:url(images/corp.png);
width:697px;
background-repeat:repeat-y;
margin-top:105px;
}

#footer {
background-image:url(images/footer.png);
background-repeat:no-repeat;
width: 697px;
height:99px;
position: absolute;
bottom: 0; left: 0;
}
#bgfooter {
position: absolute;
bottom: 0; left: 0;
width: 100%;
background-image:url(images/bg-footer.png);
background-repeat:repeat-x;
height:96px;
}


                            .contenu-texte {
							padding-top:10px;
							margin-left:15px;
							width:650px;
							font-family:verdana, Arial;
							font-size:0.7em;
							font-weight:none;
							color:#000000;
							}
							
							.texte-header {
							padding-top:8px;
							margin-left:350px;
							width:325px;
							font-family:Times;
							font-size:0.9em;
							font-weight:none;
							color:#000000;
							}
							
							.copy {
							margin-left:15px;
							margin-top:50px;
							text-align:center;
							width:650px;
							font-family:Times;
							font-size:0.9em;
							font-weight:none;
							color:#000000;
							}

Merci d'avance.

Romaric

14 Jun 2007 à 22:47

Je viens de tenter quelques experiences du style placer le bg du contenu dans le global, le bg du contenu ce repete bien mais par contre etant donner que mon footer est en absolute, le texte du contenu passe en dessous, j'ai pas reussi a resoudre ca Smiley ohwell

voici le code modifié :

html, body {
	margin: 0;
	padding: 0;
	height:100%;
}
Body {
background-color:#ffffff;
margin : 0 auto 0 auto;
}


#global {
position:relative;
background-color:#ffffff;
min-height:100%;
background-image:url(images/corp.png);
background-repeat:repeat-y;
}

#topbarheader {
background-image:url(images/topbarmenu.png);
background-repeat:no-repeat;
width:697px;
height:96px;
}

#bgheader {
background-image:url(images/bg-header.png);
background-repeat:repeat-x;
height:224px;
}

#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
width:697px;
height:236px;
}

#contenu {
width:697px;
margin-top:105px;
}

#footer {
background-image:url(images/footer.png);
background-repeat:no-repeat;
width: 697px;
height:99px;
position: absolute;
bottom: 0; left: 0;
}
#bgfooter {
position:absolute;
bottom: 0; left: 0;
width: 100%;
background-image:url(images/bg-footer.png);
background-repeat:repeat-x;
height:96px;
}


                            .contenu-texte {
							padding-top:25px;
							margin-left:15px;
							width:650px;
							font-family:verdana, Arial;
							font-size:0.7em;
							font-weight:none;
							color:#000000;
							padding-bottom:30px;
							}
							
							.texte-header {
							padding-top:8px;
							margin-left:350px;
							width:325px;
							font-family:Times;
							font-size:0.9em;
							font-weight:none;
							color:#000000;
							}
							
							.menuh {
							padding-left:5px;
							font-family:Georgia, Verdana;
							font-size:0.7em;
							}
							
							.copy {
							margin-left:15px;
							margin-top:50px;
							text-align:center;
							width:650px;
							font-family:Times;
							font-size:0.9em;
							font-weight:none;
							color:#000000;
							}
		

		
		#logo {
        float: left;
        width: 200px;
        height:90px;
		padding-top:5px;
}	
		
		
		
#contact {
float: right;
width: 65px;
height:96px;
margin-right:12px;
}													
#contact a {
width: 65px;
height: 96px;
display:block;
background: url(images/accueil-menu.png) no-repeat;

}
#contact a:hover {
width: 65px;
height: 96px;
display:block;
background: url(images/accueil-menuh.png) no-repeat;
} 


                    #soumettre {
                    float: right;
                    width: 65px;
                    height:96px;
					margin-right:12px;

                    }													
                    #soumettre a {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/recette-menu.png) no-repeat;

                    }
                    #soumettre a:hover {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/recette-menuh.png) no-repeat;
                    }
					
					
					
					#recette {
					margin-right:12px;

                    float: right;
                    width: 65px;
                    height:96px;
                    }													
                    #recette a {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/soumettre-menu.png) no-repeat;

                    }
                    #recette a:hover {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/soumettre-menuh.png) no-repeat;
                    }
					
					
					
					
					#accueil {
					margin-right:12px;

                    float: right;
                    width: 65px;
                    height:96px;
                    }													
                    #accueil a {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/contact-menu.png) no-repeat;

                    }
                    #accueil a:hover {
                    width: 65px;
                    height: 96px;
                    display:block;
                    background: url(images/contact-menuh.png) no-repeat;
                    }
					
					
					
					
					
					
#corner {
width : 165px;
height : 135px;
position : fixed;
top : 0;
right : 0;
background : url(images/corner.png) no-repeat bottom right;
}

Sujet clos

CSS et mise en forme, CSS3

Répétition du background de contenu