窗口调整大小时居中背景图像的最小边距答案

【问题标题】：Minimum margin for a centered background-image when window resizes窗口调整大小时居中背景图像的最小边距
【发布时间】：2012-07-13 18:33:14
【问题描述】：

我有一个使用 CSS 垂直和水平居中的背景图片。只要窗口足够大以显示背景图像，它就可以正常工作。

当窗口大小调整为小于 bg 图像时，会出现问题。发生这种情况时，背景图像继续居中，但我需要在背景图像的顶部和左侧保持最小边距。 BG图片为900px x 700px，我使用的代码是：

#main_wrapper {
    background-image: url(../images/background.jpg);
    position:relative;
    width:900px;
    height:700px;
    left:50%;
    top:50%;
    margin-left:-450px;
    margin-top:-350px;
}

当窗口足够大以允许它时，任何解决方案都需要继续将背景图像水平和垂直居中，但当窗口比背景图像短时，顶部的最小边距和最小边距当窗口比 bg 图像窄时，在左侧。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： css positioning background-image margins

【解决方案1】：

如果这是在您的<body> 中，我会在正文的开头添加两个额外的 div，定位绝对，并且背景颜色为白色，以确保在该区域中，背景图像没有看到。

然后将您在正文中的其余部分包裹在 <div> 中，并将其设置为 position: relative。

我认为这应该会产生您想要的结果。

【讨论】：