How to repeat a background image vertically in both sidebars?
Question
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
2 answers
solution1
0 2014-10-04 15:42:31
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
solution2
0 2014-10-04 15:49:08
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.