Es increíble lo que algunas propiedades CSS pueden llegar a dar de si, como es el caso de la propiedad background-size y su valor cover. Si combinamos esta propiedad con min-height podremos crrear un sencillo efecto parallax que, aún siendo menos espectacular que los que se pueden crear con jquery, puede ser un buen recurso de diseño.

Para crear este efecto parallax solo he usado unas cuantas lineas de CSS y unas imágenes muy chulas del universo. Básicamente la propiedad background-size hace todo el trabajo y nosotros solo tenemos que ayudarla un poco.

En la parte HTML seria algo así:

<div class="image1">
    <h1>Titulo de la pagina</h1>
    <h2>Texto entre secciones</h2>
</div>
 
<section class="content">
    <p>Texto de la pagina. Parte 1</p>
</section>
 
<div class="image2">
    <h2>Texto entre secciones</h2>
</div>
 
<section class="content">
    <p>Texto de la pagina. Parte 2</p>
</section>
 
<div class="image3"> 
    <h2><a href="#">VOLVER ATRAS</a></div></h2>
</div>

Cada clase image es uno de los fondos situados entre el contenido, el cual recibe su estilo de la clase content. Para tener mas imágenes o mas contenido tan solo tenemos que duplicar estas clases. En este ejemplo he usado imágenes diferentes para resaltar el efecto, pero también se podría usar la misma imagen en todos los intervalos, con lo que veríamos una parte diferente de la misma imagen en cada uno.

En cuanto al CSS, seria algo tan sencillo como esto:

body {
    margin:0;
    padding:0;
    border:0;
}
 
.image1 {
    position:relative;
    background: url("universo.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
     
}
 
.image2 {
    position:relative;
    background: url("universo2.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px; 
}
 
.image3 {
    position:relative;
    background: url("universo3.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px; 
}
 
h1 {
    color: #fff;
    font-size: 80px;
    text-align:center;
    font-weight: bold;
    margin: 0 auto;
    width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -20%;
    margin-left: -400px;
    opacity:0.8;
}
 
h2{
    color: #fff;
    font-size: 55px;
    text-align:center;
    margin: 0 auto;
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    opacity:0.8;
}
 
.content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    background: #FFF;
    z-index:2;
 
}

Como decía al principio lo mas importante es situar las imágenes usando el valor cover de la propiedad background-size y darles unas medidas mínimas (min-height). En cuanto a los textos, voy jugando con las posiciones fijas y absolutas para que se muevan con el contenido o se queden fijados al fondo. 

Importante también es dar una posición relativa a cada imagen de fondo, para poder posicionar texto u otros elementos sobre ella en posición absoluta, tomando como referencia las medidas de esta ventana o franja de imagen.

Con la propiedad box-sizing fijada en border-box tan solo estamos forzando al div para que tome el ancho especificado, independientemente de los padding u otras propiedades que puedan afectar a su forma. Si quieres aprender mas sobre esta propiedad puedes echarle un vistazo en w3schools.

Y hasta aquí llego yo con esta especie de efecto parallax, espero que os sea de utilidad y si lo mejoráis, porque seguro que todavía es bastante mejorable,  no dudéis en comentármelo.