CSS background repeat problem
I've got a background image that I want to extend the length of my page along the left margin.
Here is my css...
body, html{
height:100%;
}
#content{
background:url(../images/leftBorder.png);
background-repeat:repeat-y;
height:100%;
}
that has a great result:
Until the content in my page reaches past the page fold line, at this point if I scroll down I get this:
All开发者_StackOverflow中文版 the content is inside a div with the id of "content".
Thoughts?
Your #content element has a height of 100%, so anything below the fold will not be inside it, but will overflow. You can solve this by using min-height instead.
#content {
min-height: 100%;
}
Bear in mind min-height is not supported in all browsers. In particular, this will not work in IE6 and below. You can use conditional comments to apply a different style for IE6 that sets the height property as you were before, which should actually behave as you expect due to a quirk in its rendering.
The content div is not expanding like you think it is. In reality, it's only being expanded to the height of it's parent, and so on... so it's max size is determined by the body, html, and the window. Try this:
body, html{
height:100%;
}
body {
background:url(../images/leftBorder.png);
background-repeat:repeat-y;
}
#content{
height:100%;
}
Or, just
body {
background: url(../images/leftBorder.png) repeat-y;
}
How about this:
CSS:
body {
background: url('../images/leftBorder.png') repeat-y;
}
#noise-wrap {
background: url('../images/noiseBackground.png') repeat-y;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
z-index: -1;
}
HTML:
<body>
<div id="noise-wrap"></div>
<!-- content -->
</body>
Note: Your 'noise' background will not scroll with the rest of the page.
you can use fix the background image, so whenever you scroll down it remains in its place
#content{
background:url(../images/leftBorder.png);
background-repeat:repeat-y;
height:100%;
position:fixed;
}
plain and simple
加载中,请稍侯......
精彩评论