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

【问题标题】：Background position fixed regardless of screen size无论屏幕大小如何，背景位置都是固定的
【发布时间】：2013-11-10 20:46:55
【问题描述】：

我正在处理的网站的背景上有两张图片，现在对我来说，在 15 英寸的屏幕上，这些图片的位置看起来不错，就在内容容器的后面和右/左。但是在大宽屏上（或者只是其他比我更大的屏幕尺寸）它们最终会离内容容器更远，看起来就像它们是独立的。

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

主页上草药背景图片的 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;
}

【问题讨论】：

【解决方案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。

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

【讨论】：

【解决方案2】：

您正在绝对定位这两个图像。但是，它们应该相对于带有position: relative 的父元素绝对定位。现在它们与页面相关，这将继续给您带来问题。

我建议将 position: relative 添加到您的 .container 元素中。

【讨论】：