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

Question

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

0

У меня есть два изображения на фоне веб-сайта, над которым я работаю, теперь для меня на 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;
}

wharfdale 10 нояб. 2013, в 22:34

Источник

Теги:

html

css

background

position

2 ответа

Ещё вопросы

Adam McElroy · Answer 1 · 2013-11-10T19-15-00.000Z

Используйте свойство left вместе с минусом margin-left для выравнивания по мере необходимости:

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

То же самое с правым изображением, вместо этого используйте вместо него положительный margin-left.

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

Jeremy Carlson · Answer 2 · 2013-11-10T19-10-00.000Z

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

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