Inicio » Blog » HTML + CSS

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.

Poner imagen en un div responsive

Suscríbete a nuestro canal en Youtube

Suscríbirse

Seguramente 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 20517 veces

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023