2 Ataşament(e)
Imaginea de background nu se repeta in pagina
Salut,
Am o problema cu imaginea care nu se repeta in background-ul div-ului "pagina" care contine sidebarul stanga, contentul si sidebarul stanga. In IE se vede ok dar in restul nu. As vrea sa se repete si sa aibe inaltimea cat elementul cu cea mai mare inaltime (sidebar stanga, continut sau sidebar dreapta). Am atasat o diagrama si un screenshot cu problema.
Div-ul "pagina-top" contine un slice cu imaginea de sus.
Div-ul "pagina" ar trebui sa repete pe verticala un slice din imagine. O repeta daca pun height 100% la div-ul "pagina" dar o repeta doar cat e rezolutia ecranului.
Div-ul "pagina-bottom" contine un slice cu imaginea de jos.
Structura html este:
Cod HTML:
<div id="container">
<div id="header">
<div id="title"></div>
<div id="meniu-sus"></div>
</div>
<div id="pagina-top"></div>
<div id="pagina">
<div id="sidebar-stanga">
SIDEBAR STANGA
</div>
<div id="continut">
CONTINUT
</div>
<div id="sidebar-dreapta">
SIDEBAR DREAPTA
</div>
</div>
<div id="pagina-bottom"></div>
<div id="footer">
FOOTER
</div>
</div>
Iar CSS-ul este:
Cod HTML:
* { margin:auto 0;padding: 0; }
body
{
background-color:#bfbfbf;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 1000px;
text-align: left;
background-color:#D5DBB5;
}
#header
{
background-color:#b2ca0a;
width:1000px;
height:120px;
}
#pagina-top {
font-size: 0;
height:15px;
width:1000px;
background-image: url('../images/top-pagina.jpg');
background-repeat: no-repeat;
}
#pagina {
width:1000px;
background-image: url('../images/pagina-bg.jpg');
background-repeat: repeat-y;
}
#sidebar-stanga {
background-color:#9E9E9E;
float:left;
width:305px;
margin-left:10px;
text-align:center;
}
#continut {
background-color:#aEaEaE;
width:50%;
float:left;
margin-left:20px;
}
#sidebar-dreapta {
background-color:#9E9E9E;
float:right;
width:125px;
margin-right:15px;
}
#pagina-bottom {
height:15px;
width:1000px;
background-image: url('../images/pagina-bottom.jpg');
background-repeat: no-repeat;
}
#footer {
clear:both;
color:#ffffff;
background-color:#222222;
width:1000px;
height:100px;
margin-bottom:10px;
}
