背景图片和div定位?
我有以下结构:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
我试图显示一个背景图像,该图像将显示图像的完整高度,但不会强制页面滚动,但会随页面内容一起滚动。
我在 #container div 的开始标签后面放置了 #bgimage div,并尝试了以下 CSS:
position:fixed + height:100% - 显示图像的完整高度但不滚动与页面内容一起滚动
position:absolute + height:100% - 随页面滚动但不滚动切断页面内容结束处的图像
position:absolute + height:1000px - 显示完整图像但强制要滚动的页面
有什么想法吗?
谢谢
I have the following structure:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
I'm trying to display a background image that will show the full height of the image, but not force the page to scroll as a result of it but that will scroll with the page content.
I've placed a #bgimage div after the opening tag of the #container div and I've tried the following CSS:
position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content
position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends
position: absolute + height:1000px - displays the full image but forces the page to scroll
Any idea?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
设置身体本身的背景。 CSS3 允许您设置多个背景(如果您已经有一个背景)。虽然这在 IE8 及之前版本中不起作用。
[编辑]
由于这在您的页面中不起作用,请尝试使 bgimage div 成为页面内容的容器,而不指定确切的高度。将最小高度设置为 100%。
这样,它的大小应该适合页面内容。它总是会到达窗口的底部,并且在不需要时不会强制滚动条。如果内容小于窗口高度,最小高度会导致 div 填充窗口。
Set the background on the body itself. CSS3 allows you to set multiple backgrounds in case you already got one. Although this doesn't work in IE8 and before.
[edit]
Since that doesn't work in your page, try to make the bgimage div a container for your page content without specifying an exact height. Set the min-height to
100%
.That way, it should size to the page content. It will always reach to the bottom of the window, and it won't force scrollbars when they're not needed. The min-height causes the div to fill the window in case the content is smaller than the window height.
使用后台附件:固定;它会随着页面滚动。
Use background-attachment: fixed; it will scroll with the page.