<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Parallax Simple</title>
<style>
body {
background:#000000 url('fondo.jpg');
font:normal 16px/24px Helvetica, sans-serif;
}
.container {
width:80%;
margin:auto;
}
h2, p {
padding:16px;
color:#FFFFFF;
background-color:#000000;
filter:alpha(Opacity=80);
-khtml-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundAttachment = "fixed";
window.onscroll = function() {
document.body.style.backgroundPosition = "0px " + (0 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 8)) + "px";
}
}
</script>
</head>
<body>
<div class="container">
<h2>Añadimos contenido ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Y, más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Aún más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Y, repetimos ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Una vez más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Ir a <a href="#"> Top </a></h2>
</div>
</body>
</html>
Comentarios sobre la versión: 1.0 (3)
P.D.: Si ponemos un fondo que no dé la altura de los contenidos, lo mejor sería que las partes alta y baja de la imagen, sean iguales, muy parecidas; con el fin de que, cuando se repita la imagen en vertical, no se aprecie o se note muy poco la unión.
Muchas gracias por vuestros comentarios.