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

Question

我想要一个大于内容的背景图像,它将保持与内容居中,但不会影响布局(意味着没有滚动条来容纳背景图像).内容必须使用margin:auto; 当视窗变得小于内容时,左侧将与视图窗格的左侧保持齐平.

我已经多次看过这个问题了,并且已经尝试了很多解决方案,但是没有一个已经接受的答案确实有效.

编辑澄清

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

答:当视图窗口小于背景图像和主要内容时,内容的左侧与视图窗格的左侧保持齐平,背景图像保持居中于主要内容,视图窗格滚动条仅滚动出到主要内容的右边缘(而不是背景的右边缘).

B:当视图窗格大于背景图像和内容时,两者都保持在视图窗格的中心.

C:当视图窗格与主要内容的大小相同时,背景图像应保持居中于主要内容,不应存在滚动条.

Answer 1

更新后的答案:我仍然花了太多时间在这上面:-),特别是当它结束如此简单时.它允许根据容器的高度调整背景大小,这似乎与yunzen的解决方案不同.现在确实使用margin: 0 auto;.仍然随容器高度增长.

查看新答案.

您可以查看不使用auto保证金的原始,更复杂的答案.

HTML:

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

CSS:

#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; 
}