23 julio, 2019
Poner imagen en un div responsive
Un gran tip que te permitirá poner alguna imagen deseada en la parte del fondo de una sección de tu pagina web totalmente responsive y rápido.
Suscríbete a nuestro canal en Youtube
SuscríbirseSeguramente notaste que muchas páginas web tienen esta temática de poner fondos para determinados sectores de su página, a veces hasta ponerlo en toda la página web.
Ahora con la evolución de CSS podemos hacer estos efectos, los cuales nos ayuda con un poco de creatividad sacarle el máximo provecho.
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,body{
color:white;
font-family:'Opens Sans',helvetica;
height:100%;
width:100%;
margin: 0px;
}
.portada{
background: url(https://www.purina.es/gato/purina-one/sites/g/files/mcldtz1856/files/2018-06/Mi_gato_me_muerde%281%29.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;
}
.text{
margin: 30px 0px 30px 0px;
padding: 10px;
background: rgba(0,0,0,0.5);
display: inline-block;
}
Propiedades CSS determinantes
Lo que realmente hace que la imagen se posicione como fondo responsive es por background:no-repeat fixed center; que fija una imagen a la clase, identidad, o elemento html del CSS, la centra y obliga a no repetirla y hacerla imagen única.
Esta propiedad de CSS3 background-size: cover;es la encargada de adaptar la imagen a todo el tamaño del elemento elegido (class, id…etc) que en este caso sería la pantalla completa adaptable a todas las resoluciones. Su funcionamiento es de respetar la altura de la imagen y adaptar la imagen en ancho según la pantalla o el elemento al que se le de uso.
Cubrir con un div la pantalla completa
Para que puedas crear un div que se adapte a la resolución de toda la pantalla, debes dar las siguientes propiedades en CSS a body y html, height:100%;, width:100%; esto hace que estos elementos base principales del html, se adapte al total de la altura y anchura de la pantalla.
A continuación creamos un div contenedor en este caso la clase .portada en los que se vuelven a aplicar height: 100%; width: 100% ; para adaptar el div contenedor a la totalidad de la pantalla en ancho y alto.
<html lang="es">
<meta charset="UTF-8"/>
<head>
</head>
<body>
<div class="portada">
<div class="text">
<h1> div con imagen de fondo responsive</h1>
<h3>Imagen adaptada a todas las resoluciones de pantalla</h3>
</div>
</div>
</body>
</html>
Leido 21094 veces
