html - 无论屏幕大小如何，背景位置都是固定的

Question

我正在处理的网站背景上有两张图片，现在对我来说，在 15"屏幕上，这些图片的位置看起来不错，就在内容容器的后面和右边/左边。但是在大宽屏上 (或者其他比我大得多的屏幕尺寸)它们最终离内容容器更远，看起来就像它们自己一样。

它们是基于百分比的，但是，从我的屏幕左/右开始的 25% 与使用宽屏的人不同。无论如何，我都需要他们处于相同的位置。中心的 X% 可能更像它。有人知道合适的选择吗？我附上了一些图像正在使用的代码。

http://bit.ly/1aNgkfa

首页草药背景图片的 CSS(左上)

.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}

主页上辣椒背景图片的 CSS(右下)

.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}

Answer 1

使用 left 属性和减号 margin-left 根据需要对齐:

.herb-bg-img {
    position: absolute;
    left: 50%;
    margin-left: -600px; // Change as needed
    margin-top: 5%;
    z-index: -2;
}

与右手边的图像相同，只使用正的 margin-left 代替。

无论屏幕宽度如何，这都应该保持不变。