Autor:

Div con imagen de fondo responsive CSS3

16
40226

¿habéis visto las portadas de muchas web con una imagen a pantalla completa que se redimensiona respetando siempre el tamaño del dispositivo donde se ve? pues con las nuevas propiedades de CSS3 ahora es posible lograrlo sin necesitar  usar lenguajes de programación como  Javascript.  aquí os dejo un ejemplo simple.

CSS

@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(http://desarrollofrontend.com/wp-content/uploads/2014/09/flatdiseno1.png) 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

<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>

Aquí como veis en el HTML no se necesita más que una simple estructura para lograr el resultado junto al CSS.

Mira este ejemplo funcionando

See the Pen Div con imagen de fondo responsive by Alber Pedraza (@AlberPedraza) on CodePen.