css适用于不同屏幕尺寸的大背景而无需滚动条

时间:2012-01-14 15:40:25

标签: html css background-image

也许这是一个明智的选择,但我现在无法看到解决方案:) 我有一个960px居中的内容div,现在我需要添加一个包含2个部分的预告片,一个巨大的背景,宽阴影(2000px宽)和一些前景照片最大960px宽。 如果我添加2000px背景,我的chrome会自动应用水平滚动条,因为我的分辨率低至1280px。我需要的是它忽略了滚动条并让图像超出界限而只能在更高分辨率下看到

<div id="cotainer!> <!--! #container 960px wide, margin: auto, overflow:visible --->

  <div id="stage"></div> <!--! has the 2000px background -->

</div> <!--! end of #container -->

我希望我能够正确描述我的问题,提前感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

你正在接近这个错误。如果你想要一个宽的背景图像,你需要将背景应用于包装器,并在包装​​器中添加容器:

<div id="#wrapper" style="background-image:(url...);background-repeat:no-repeat;">
     <div id="container"> STUFF </div>
</div>

只要包装器没有被任何更窄的div包围(它将扩展到适合页面的宽度),这将起作用。