不同屏幕尺寸的大背景的CSS，无需滚动条
也许这是理所当然的，但我现在看不到解决方案:) 我有一个 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 -->
我希望我能够正确描述我的问题，提前感谢您的帮助！
Maybe this is a no-brainer but i cant see the solution right now :)
I got a 960px centered content div and now i need to add a teaser which contains 2 parts, a huge background with wide shadows (2000px wide) and some foreground pics max 960px wide.
If i add the 2000px background my chrome automatically applies horizontal scrollbars because of my low 1280px resolution. What I need is that it ignores the scrollbars and let the image just get out of bounds and only been seen on higher resolutions
<div id="cotainer!> <!--! #container 960px wide, margin: auto, overflow:visible --->
<div id="stage"></div> <!--! has the 2000px background -->
</div> <!--! end of #container -->
I hope i was able to describe my problem properly, thanks in advance for any help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的做法是错误的。如果你想要一个宽背景图像，你需要将背景应用到包装器，并将容器添加到包装器内：
只要包装器不被任何较窄的 div 包围（它将扩展以适应页面宽度）。
You're approaching this wrong. If you want a wide background image, you'll want to apply the background to a wrapper, and add the container inside the wrapper:
This will work so long as the wrapper is not enclosed by any narrower div (it will expand to fit the width of the page).