Исходное положение фиксировано независимо от размера экрана

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.

Это должно оставаться неизменным независимо от ширины экрана.

Answer 2

Вы позиционируете эти два изображения абсолютно. Однако они должны быть абсолютно позиционированы относительно родительского элемента с position: relative. Сейчас они относятся к странице, которая будет по-прежнему вызывать проблемы.

Я бы рекомендовал добавить position: relative к вашим .container элементам.