Как создать фиксированный фоновый эффект прокрутки без фонового изображения?

У меня есть изображение с горизонтальной и вертикальной ориентацией на странице. Я бы так хотел, чтобы при прокрутке пользователя содержимое под ним действительно появилось, как если бы верхний контент был исправлен. Как этот эффект здесь... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Только проблема заключается в том, что они используют свойство background-attachment: fixed. Я не могу использовать это, так как мне нужно, чтобы изображение было контентом (оно фактически будет изменено на видео HTML5).

Мой код здесь... http://jsfiddle.net/5jphd/1/

HTML

<div>
 
 <div>Scroll down</div>
</div>
<div>
 Here is some content
</div>

CSS

html, body {height: 100%}

body {
 padding: 0;
 margin:0;
 font-family: sans-serif;
}
.image {
 position: relative;
 left: 0px; 
 height: 100%;
 background-position: 50% 50%;
 background-size: cover;
 background-attachment: scroll;
 text-align: center;
}
img {
 max-width: 90%;
 max-height: 70%;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
}

.text {
 position: absolute; 
 bottom: 20px;
 left:50%;
 margin-left: -44px;
}
.wrap {
 background-color: lightblue;
 text-align: center;
 padding: 100px;
 font-size: 30px;
 min-height: 1000px;
}

Можно ли это сделать с этой разметкой? Поэтому, когда вы прокручиваете вниз, контент будет расти и перекрывать изображение.

2 ответа

Хорошо, я сделал это, это то, чего я хотел достичь. Я просто сделал видео и прокручивал текстовое положение: фиксированный и сделал основную позицию содержания тела: relative - http://jsfiddle.net/5jphd/4/

html, body {height: 100%}

body {
 padding: 0;
 margin:0;
 font-family: sans-serif;
}
.image {
 position: relative;
 left: 0px; 
 height: 100%;
 background-position: 50% 50%;
 background-size: cover;
 background-attachment: scroll;
 text-align: center;
}
img {
 max-width: 90%;
 max-height: 70%;
 margin: auto;
 position: fixed;
 top: 0; left: 0; bottom: 0; right: 0;
}

.text {
 position: fixed; 
 bottom: 20px;
 left:50%;
 margin-left: -44px;
}
.wrap {
 background-color: lightblue;
 text-align: center;
 padding: 100px;
 font-size: 30px;
 min-height: 1000px;
 position:relative;
}


JSFiddle

Я думаю, именно об этом вы и просите. Учитывайте пропорции, это то, что hd vieo, вероятно, будет выглядеть на 320x480 или около того.

#bg {
 position:absolute;
 position:fixed;
 top:0;
 width:100%;
 height:100%;
 margin:auto;
 overflow:hidden;
 z-index:-1;
}
#bg img { max-width:100%; }

licensed under cc by-sa 3.0 with attribution.