Imagen Responsive Pantalla Completa. El objetivo de este artículo es que una imagen de fondo en un sitio web se muestre en toda la ventana del navegador en todo momento, sin embargo, esta no debe moverse, debe estar de manera estática. Vamos a poner algunos detalles sobre este requerimiento y que se ha visto en otros sitios web:
- Llena la página entera con imagen de fondo, sin espacio en blanco.
- Conserva las proporciones de la imagen (relación de aspecto), dependiendo de la ventana.
- La imagen está centrada en la página y el contenido se desplaza.
- No causa barras de desplazamiento en absoluto.
En algunas páginas de turismo o de veterinarias suelen colocar una imagen de fondo para llamar la atención de sus potenciales clientes. Los sitios actuales que utilizan una imagen que impacta la pantalla completa no dependa del dispositivo y la resolución del mismo. El fondo de imagen es 100% expandida en la pantalla, y se visualiza correctamente en todos los anchos y altos de ventana de navegador.
Imagen Responsive Pantalla Completa con CSS: Ejemplos
a) Ejemplo #01 Fondo responsiva
<style type="text/css">
html {
background: url(01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>b) Ejemplo #02 Fondo responsiva
body, html {
height: 100%;
background-repeat: no-repeat;
background: url(../img/login-bg.JPG) no-repeat center center fixed;
background-size: 100% 100%;
}c) Ejemplo #03 Fondo responsiva completo
Tutorial paso a paso
Vamos a ver ahora cómo hacemos que la imagen ocupe todo el ancho del navegador. Lo primero de todo será crear nuestro código HTML:
<!doctype html> <html> <body> ...Aquí tu contenido de la web... </body> </html>
Lo único que hará falta poner en el código HTML es la vinculacion logica con CSS donde mostraremos la imagen 100% responsive. Las reglas de CSS más importante son estas:
body {
/* Aquí el origen de la imagen */
background-image: url(images/background-imagen.jpg);
/* Fijar la imagen de fondo este vertical y
horizontalmente y centrado */
background-position: center center;
/* Esta imagen no debe de repetirse */
background-repeat: no-repeat;
/* COn esta regla fijamos la imagen en la pantalla. */
background-attachment: fixed;
/* La imagen ocupa el 100% y se reescala */
background-size: cover;
/* Damos un color de fondo mientras la imagen está cargando */
background-color: #464646;
}
Para Moviles lo tenemos aqui
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}QUIZÁ LE INTERESE ESTOS ARTICULOS
[pt_view id=»fc09d98ps2″]
CONCLUSIÓN
Solo recordar que el manejo de imágenes responsivas es casi obligatorios en nuestros sistemas web y/o páginas web. Por lo tanto, su implementación es muy necesaria para optimizar nuestra información hacia los buscadores web.
Google valora y te da posición a tu página web si esta puede adaptarse a cualquier resolución de pantalla.
Si te ha gustado el artículo, te animo a dejar un comentario. Aquí te dejo el enlace para que puedas descargarte los archivos de este post:
Descargar Código FuenteFuente: sixrevisions
