Hoy en día es estándar tener secciones en paginas web con imágenes de fondos que son completamente responsive. Adaptables a cualquier tipo de dispositivo móvil sin perder calidad.
Usando CCS3 se puede lograr la funcionalidad, de forma sencilla y limpia. Existen las siguientes propiedades.
background:no-repeat fixed center; esta propiedad fija una imagen a una clase, identidad, o elemento html. Ademas, centra la imagen dentro del elemento sin que se repita.
background-size: cover; esta propiedad es la encargada que el elemento junto con el fondo para que se adapte a las resoluciones de pantalla donde se mostrara la pagina.
A continuación se creara una "clase" llamada Ultrabackround que tendra la imagen de fondo. A parte de las propiedades antes mencionadas, se tendra las propiedades Width y Height al 100% para que la etiqueta que lleve la clase abarca todo el espacio donde este contenida.
Igual para las etiqueta HTML y BODY tendran las propiedades Width y Height al 100%.
CSS:
html,body{
color:white;
height:100%;
width:100%;
margin: 0px;
}
.ultrabackground{
background: url(https://magic.wizards.com/sites/mtg/files/images/wallpaper/Reanimate_UMA_Tablet_Wallpaper.jpg) no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100% ;
text-align: center;
}
.title{
margin: 30px 0px 30px 0px;
padding: 10px;
background: rgba(0,0,0,0.5);
display: inline-block;
}
A continuación el código html:
<html lang="es"> <meta charset="UTF-8"/> <head> </head> <body> <div class="ultrabackground"> <div class="title"> <h1>Ejemplo de imagen fondo responsive</h1> <h3>Apto para cualquier tipo de pantalla</h3> </div> </div> </body> </html>
A continuación el código en snippet para que aprecien la funcionalidad.
Espero que sea de ayuda, saludos.
No hay comentarios:
Publicar un comentario