Imagen tamaño completo hasta hacer scroll

[PedroDesing]

Buenas, he visto en varias plantillas de wordpress que al entrar en la web aparece una imagen a pantalla completa, y se adapta a la resolucion. Pero cuando hacemos scroll la pagina va hacia abajo y sigues viendo el resto del contenido de la web.

No lo he encontrado en google porque resulta dificil explicarle a google el efecto así que el resultado de la búsqueda no es satisfactorio.

Tienen alguna idea de como se hace esto? o un enlace que pueda consultar?

Muchas gracias de antemano!

[jose8luis]

Prueba esto en el css, la propiedad básica es el background-attachment que deja fija la imagen y al hacer scroll el contenido (al que deberás poner un fondo blanco) pasará por encima. Ya me dirás.

html {
background-image: url("ruta-de-tu-imagen.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

[PedroDesing]

Muchas gracias por tu contestación, pero creo que tú te refieres al conocido como efecto paralax.

Yo hablo de este efecto. Si te fijas, aunque redimensiones la ventana o cambies la resolucion o uses ctr+ o ctr-, la imagen se mantiene ocupando la venta, pero si hacemos scroll hacia abajo, la web se mueve normalmente.

Muchas gracias de nuevo.

Aqui podeis ver un ejemplo: vegaplata(punto)es


Igual esto es mas javascript o algo asi.

[fede5426]

Se hace indicándole al contenedor que ocupe 100vh.. que sería lo mismo que decir "ocupa el 100% del alto del dispositivo".

VH = Viewport Height

Código CSS:

.contenedor{
width:100%;
height:100vh;
background-image:url("http://i.imgur.com/mzvGVIM.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
 

http://codepen.io/fede5426/pen/vOqGYL

Saludos