CSS Scrolling backgrounds left and right
CSS
#wrapper {
min-width: 800px;
max-width: 1000px;
height: 100%;
margin: 0 auto;
text-align: left;
}
#wrap-left {
height: 100%;
position: relative;
float: left;
width: 20px;
background: #FFF url('img/bodybg_left.jpg') repeat-y left;
}
#wrap-right {
height: 100%;
position: relative;
float: right;
width: 20px;
background: #FFF url('img/bodybg_right.jpg') repeat-y right;
}
HTML
<div id="wrapper">
<div id="wrap-left"><!-- LEFT BACKGROUND //--></div>
<div id="wrap-right"><!-- RIGHT BACKGROUND //--></div>
<table id="content">
...
</table>
<div style="clear: both;"></div>
</div>
left and right background are fully displayed on initial viewport, but when the table is larger then the viewport (height > 100%) and I scroll down, the background won't show below the initial viewport. Is it possible to solve this issue with css or do I need to use a html table? I tried to set the position of the background divs to fixed but I need to have them positioned relative to the wrapper which has a 开发者_如何学JAVAdynamic width.
Regards, Ben
Solution, use this or check answers below!
CSS
#wrapper {
min-width: 800px;
max-width: 1000px;
min-height: 100%;
height: 100%;
margin: 0 auto;
text-align: left;
background: url('img/bodybg_left.jpg') repeat-y left;
}
#wrap-left {
background: url('img/bodybg_left.jpg') repeat-y left;
min-height: 100%;
}
#wrap-right {
background: url('img/bodybg_right.jpg') repeat-y right;
min-height: 100%;
}
#content {
width: auto;
margin: 0 20px;
border-collapse: collapse;
border-top: 1px solid #000;
min-height: 100%;
}
HTML
<div id="wrapper">
<div id="wrap-right"><div id="wrap-left">
<table id="content">
...
</table>
</div></div>
</div>
My first answer(s) were rushed and simply didn't work.
This time, I actually tried it properly, with two background-image
.
Live Demo (edit)
CSS:
html, body {
margin:0; padding:0; border:0;
height: 100%
}
#wrapper {
min-width: 800px;
max-width: 1000px;
min-height: 100%;
margin: 0 auto;
text-align: left;
position: relative
}
#wrap-left, #wrap-right {
position: absolute;
width: 100%;
height: 100%;
}
#wrap-left {
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/250px-Color_icon_blue.svg.png') repeat-y top left
}
#wrap-right {
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/250px-Color_icon_red.svg.png') repeat-y top right
}
#content {
position: relative
}
HTML:
<div id="wrapper">
<div id="wrap-left"></div><div id="wrap-right"></div>
<table id="content">
<tr><td>fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />
<!--fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg-->
</td></tr>
</table>
</div>
精彩评论