我正在制作的网站背景上有两张图片，现在我在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;
}
答案 0 :(得分：0)
使用left属性和减号margin-left根据需要对齐：
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
与右侧图片相同，只使用肯定的margin-left。
无论屏幕宽度如何，都应该保持不变。
答案 1 :(得分：0)
你绝对会定位这两张图片。但是，它们应与position: relative的父元素绝对定位。现在它们与页面有关，这将继续给你带来问题。
我建议您在position: relative元素中添加.container。