在浏览器中定位内容以匹配重复的背景

Question

我有一个重复的背景和这样的位置：

body
{
    background-image: url(images/background.jpg);
    background-repeat: repeat;
    background-position: 50% 50%;
}

这很好用。现在我想以页面内容为中心。如果我的图像是1000x560px，我希望它对齐以匹配现在在浏览器中居中的背景。

最佳方法？

Answer 1

对于您的内容div，您可以使用position:absolute。写得像这样：

.content{
 width:1000px;
 height:560px;
 top:50%;
 margin-top:-230px;
 left:50%;
 margin-left:-500px
}

Answer 2

如果您现在将居中的背景图像应用于body标签，则可以声明一个容器然后坐在页面的中心，如下所示：

#container {
width: 1000px;
height: 560px;
margin: 20% 0 auto;
}

这可以创建一个直接放在背景上的容器，并根据窗口的大小重新调整大小。我唯一不能解决的是最高保证金百分比，你可能不得不玩这个以使其正确。在这种情况下，我已经宣布它为20％，还注意我只在FF中测试了这个

让我知道这是如何工作的，如果我正确理解你。

干杯