我想要一个大于内容的背景图像,它将保持与内容居中,但不会影响布局(意味着没有滚动条来容纳背景图像).内容必须使用margin：auto;当视窗变得小于内容时,左侧将与视图窗格的左侧保持齐平.
我已经多次看过这个问题了,并且已经尝试了很多解决方案,但是没有一个已经接受的答案确实有效.
编辑澄清
这个问题仍然有点模糊,所以我会尝试用一些图片说明我需要什么.在这些图像中,绿色是背景图像,红色是主要内容,蓝色是浏览器的视图.
答：当视图窗口小于背景图像和主要内容时,内容的左侧与视图窗格的左侧保持齐平,背景图像保持居中于主要内容,视图窗格滚动条仅滚动出到主要内容的右边缘(而不是背景的右边缘).
B：当视图窗格大于背景图像和内容时,两者都保持在视图窗格的中心.
解决方法
更新后的答案：我仍然花了太多时间在这上面:-),特别是当它结束如此简单时.它允许根据容器的高度调整背景大小,这似乎与yunzen的解决方案不同.现在确实使用margin：0 auto;.仍然随容器高度增长.
你可以view the original,more complex answer不使用自动保证金.
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;
}
