Comment créer l'arrière-plan fixe effet de défilement, sans image de fond?

J'ai un à l'horizontale et à la verticale centrée sur image sur une page. Je l'aime ainsi, lorsque l'utilisateur fait défiler le contenu ci-dessous il s'agit en réalité, comme si le contenu est fixe. Comme cet effet là... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Seul problème, c'est pour cet effet, ils utilisent le background-attachment: fixed propriété. Je ne peux pas utiliser ce que j'ai besoin de l'image à contenu (il sera réellement changé à la vidéo HTML5).

Mon code est ici... http://jsfiddle.net/5jphd/1/

HTML

<div class="image">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
    <div class="text">Scroll down</div>
</div>
<div class="wrap">
    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;
}

Est-ce possible de faire avec ce langage? Ainsi, lorsque vous faites défiler le contenu de se lever et de chevauchement de l'image.

  • Je suis un peu confus.. pourquoi ne pas simplement utiliser un fixe HTML5 vidéo alors? Vous serait tout simplement mettre le contenu en arrière-plan transparent. Par ailleurs, un grand nombre d'ordinateurs lag comme un fou si vous utilisez HD vidéo HTML5 horizons.. même un 5 extensible deuxième clip est comme 5mo et presque accidents de vieux Pc/ordinateurs Portables et un grand nombre de téléphones.
  • est-ce que vous essayez d'accomplis ? jsfiddle.net/5jphd/2
  • Oui GCyrillus c'est le résultat que je suis après, à l'exception de l'image doit être dans la balise image, et ne pas utiliser une image de fond d'écran.
InformationsquelleAutor Adam | 2014-01-26