Полноэкранное фоновое изображение с наложением 100% высоты - PullRequest
0 голосов
/ 08 декабря 2011

Проверьте это изображение , чтобы увидеть, чего я пытаюсь достичь.В основном я хочу использовать полноэкранное фоновое изображение и затем наложить div (на связанном изображении это серая область посередине с красными линиями вокруг него) после логотипа и навигационной панели слева, которая всегда будет иметь 100% высоты независимо от прокрутки.

Единственный способ, которым я могу справиться, - это использовать фоновое изображение для серой области, которая повторяется по вертикали, а затем сделать div для полноэкранного фонового изображения и изменить z-индексы наполучить желаемое наложение.

CSS, который я использовал для оверлея div, был:

#overlay
{
    position: absolute;
    left: 360px;
    top: 0;
    bottom: 0;
    width: 600px;
    height: 100%;
}

Но когда вам приходится прокручивать содержимое большего размера, div всегда заканчивается на "fold"и затем фоновое изображение вступает во владение для остальной части содержимого.

Есть ли какие-нибудь приемы, которыми я могу воспользоваться, чтобы сделать это исключительно на CSS?Кроме того, я не хочу использовать несколько фонов CSS3 из-за проблем с браузерами.

1 Ответ

1 голос
/ 08 декабря 2011

Попробуйте удалить height: 100% и изменить положение на относительное.

Возможно, вам понадобится добавить отступы и поля, чтобы получить именно то, что вы хотите, но это должно исправить.

...