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

我有一个背景图像，它使用CSS垂直和水平居中。它看起来很棒，只要窗口足够大以显示背景图像，它就会工作。窗口大小调整时居中背景图像的最小边距

当窗口大小比bg图像小时，我遇到了问题。发生这种情况时，bg图像继续居中，但我需要在bg图像的顶部和左侧保持最小的边距。该BG图像是900px X 700像素，和我使用的代码是：

#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图像短时在顶部具有最小边缘，并且在窗口比bg图像窄时在左边具有最小边缘。任何帮助将不胜感激。谢谢。

来源

2012-07-12 RustyChains

如果这是在<body>中，我会在身体的开始位置添加两个额外的div，绝对定位并且具有白色背景色，以确保在该区域背景图像不是没见过。

然后用<div>包裹你在身体中的剩余部分，并且使其成为position: relative。

我认为这应该导致你想要的。

来源

2012-07-13 10:33:14

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

回答

相关问题