Html 试图使大背景图像保持以自动边距为中心的内容div居中，但bg图像不应影响布局

我想要一个比内容大的背景图像，它将保持与内容居中，但不会影响布局（意味着没有滚动条容纳背景图像）。内容必须使用边距居中：自动；这样，当viewpane小于内容时，左侧将与viewpane的左侧保持齐平

这个问题我已经被问过好几次了，也尝试过很多解决方案，但是没有一个被接受的答案是有效的

编辑以澄清

这个问题仍然有点模糊，所以我将尝试用一些图片来说明我需要什么。在这些图像中，绿色是背景图像，红色是主要内容，蓝色是浏览器的视图窗格

A:当视图窗格小于背景图像和主要内容时，内容的左侧与视图窗格的左侧保持齐平，背景图像与主要内容居中，视图窗格滚动条将仅滚动到主要内容的右边缘（而不是背景的右边缘）

B:当viewpane大于背景图像和内容时，两者都保持在viewpane的中心

---

C:当视图窗格与主要内容大小相同时，背景图像应保持在主要内容的中心，不应出现滚动条。

如果我正确理解了这个问题，我相信这就是您想要的

.main-container
{
    height: 1005px;
    left: 50%;
    margin-left: -560px;
    position: relative;
    width: 1120px;
}

要隐藏滚动条，可以添加

overflow: hidden;

仅适用于水平方向：

overflow-x: hidden;

---

如果它扩展到超过浏览器的窗口大小，它将为整个窗口创建一个滚动条。我不确定你到底想阻止什么滚动条

max width

告诉它“在任何情况下，此框都不应大于此宽度”。因此，大于此宽度的框只会扩展到父框的边界之外

我想这就是你想要的

---

HTML 那么试试这个：

<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>

/*您的内容*/

---

由于某些原因，我无法获得z-index的工作，但是如果可以，您也可以将内容放入

包装器中，并且
内容
是不需要的。
更新的答案：我仍然在这方面花费了太多时间：-），尤其是当它变得如此简单时。它允许根据容器的高度调整背景大小，这似乎与yunzen的解决方案不同现在使用
边距：0自动。仍然随容器高度而增长


您可以选择不使用
auto
margin的

HTML:
根据您的原始图表，我假设背景图像是这样的-一个图像，可能是高分辨率的，而不是重复的模式。您可能希望使用css3属性，这对于此特定目的非常方便。它受到现代浏览器的良好支持，如果您必须支持IE8及以下版本，它的回归也相当好

body {
  background-image:url(/*nice higher res picture*/);
  background-size:cover;
  background-repeat:no-repeat;
}

我不太明白你在说什么。@animuson我不知道如何更简单地解释它。我想让out div影响布局。我希望内部div不会影响布局，但溢出应该仍然可见。有什么吗？不幸的是，我需要内部div保持100%可见，但只有外部div会影响布局。这会隐藏内容，不是吗？我不想隐藏它，我只是希望它不会影响布局。我希望当外部div超出viewpane时，滚动条会出现，但当内部div超出viewpane时就不会了。然后您会在内部div上设置溢出。虽然我不能100%确定我是否真的回答了您的问题。内部div中没有任何内容。它只有一个背景图像。设置溢出将不会影响任何内容。这并不能回答问题。这是一个div的中心，不是我想要的方式。div应使用边距居中：auto；因此，如果viewpane变得比内容窄，则左侧与viewpane的左侧保持齐平。抱歉，我意识到这实际上不起作用。内部div的内容在外部div的边界处被切断。我需要整个内部div保持可见。在原始帖子中添加一个图像以尝试澄清是否选择最大宽度：100%；我们有能力做到这一点。看看我的回答，这在场景A和C下是失败的。相反，它在场景B中不起作用。事实上，A和C是相同的。在没有任何其他样式的空白页面上尝试此操作，您将了解我的意思。您是对的，在场景B下它也失败，但在场景A和C下它也失败。内部内容的左侧应与viewpane的左侧保持齐平，但在您的示例中，背景图像的左侧与viewpane的左侧保持齐平。事实上，你的内容和背景图片大小都一样，这根本不是我想要的。当viewpane小于背景图像时，背景图像的左侧应超过viewpane的左侧。在我看来，这正是你想要的。或者我还没有理解这个问题。是的，你误解了。内容的大小与背景图像的大小不同。内容是应该以边距自动居中的内容，而不是背景图像。否则，当viewpane小于背景图像时，背景图像的左侧将与viewpane的左侧齐平，而不是内容的左侧与viewpane的左侧齐平……。这似乎正是我要寻找的。“今晚我将对此进行测试，并接受它是否能像我相信的那样工作。”dqhendricks和yunzen——它
<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>

<div id="Bkg">
   <div id="Content">Content goes here. </div>
</div>

#Bkg {
    width: 100%;
    min-width: 300px; /* equals width of content */
    background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
    padding-bottom: 50px;
}

#Content {
    width: 300px;
    margin: 0 auto; 
}

body {
  background-image:url(/*nice higher res picture*/);
  background-size:cover;
  background-repeat:no-repeat;
}