Проверьте это изображение , чтобы увидеть, чего я пытаюсь достичь.В основном я хочу использовать полноэкранное фоновое изображение и затем наложить div (на связанном изображении это серая область посередине с красными линиями вокруг него) после логотипа и навигационной панели слева, которая всегда будет иметь 100% высоты независимо от прокрутки.
Единственный способ, которым я могу справиться, - это использовать фоновое изображение для серой области, которая повторяется по вертикали, а затем сделать div для полноэкранного фонового изображения и изменить z-индексы наполучить желаемое наложение.
CSS, который я использовал для оверлея div, был:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
Но когда вам приходится прокручивать содержимое большего размера, div всегда заканчивается на "fold"и затем фоновое изображение вступает во владение для остальной части содержимого.
Есть ли какие-нибудь приемы, которыми я могу воспользоваться, чтобы сделать это исключительно на CSS?Кроме того, я не хочу использовать несколько фонов CSS3 из-за проблем с браузерами.