背景图片和div定位?

发布于 2024-12-08 14:23:37 字数 613 浏览 0 评论 0原文

我有以下结构:

<div id="wrap">
   <div id="container">
       <div id="header">
       </div> <!--close header-->
       <div id="main">

… etc

我试图显示一个背景图像,该图像将显示图像的完整高度,但不会强制页面滚动,但会随页面内容一起滚动。

我在 #container div 的开始标签后面放置了 #bgimage div,并尝试了以下 CSS:

  1. position:fixed + height:100% - 显示图像的完整高度但不滚动与页面内容一起滚动

  2. position:absolute + height:100% - 随页面滚动但不滚动切断页面内容结束处的图像

  3. 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:

  1. position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content

  2. position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends

  3. position: absolute + height:1000px - displays the full image but forces the page to scroll

Any idea?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你与昨日 2024-12-15 14:23:37

设置身体本身的背景。 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.

诺曦 2024-12-15 14:23:37

使用后台附件:固定;它会随着页面滚动。

Use background-attachment: fixed; it will scroll with the page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文