Autor:

Div con imagen de fondo responsive CSS3

16
31226

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

  • Fk Frank

    El detalle que tengo es que tengo el background en el div, todo esta de momento bien, el detalle es que al dimensionar la pagina el background de este div se corta, el div igual tengo el detalle de que el alto lo tengo en pixeles… bueno y si quito la propiedad de background-size: cover; el fondo del div ahora si se adapta a lo ancho pero no a lo alto… 🙁 ayuda por favor, de ante mano gracias.

    • AlberPedraza

      Hola Frank, prueba a usar el “height:100%;” y “width:100%;” para el div, y para las etiquetas “html,body” igual “height:100%;” y “width:100%;”. Si puedes mostrar el código CSS y HTML, te podría ayudar mejor, saludos!

    • Fk Frank

      Bueno, después de varias horas encontré solucionarlo, de igual manera muchas gracias. 🙂

    • AlberPedraza

      De nada, un placer 🙂

    • Como lo resolviste?

    • Pienso que lo resolvería con los apuntes que le mostré, te puedo ayudar Xavier?

  • Manuel Benjumea

    Como lo solucionaste al final? Tengo el mismo problema.

    • AlberPedraza

      Hola Manuel, cuál es el problema que tienes? Un saludo.

    • Manuel Benjumea

      Pues el mismo que se expresa aquí… Tengo la imagen de fondo puesta y se corta al hacer la ventana más pequeña
      Podéis verlo en http://www.happylandparc.es/parc.php

    • AlberPedraza

      Hola Manuel, hay errores de CSS y estructura CSS y HTML según he estado viendo, te recomendaría que revisaras la web, he intentaras corregir esos errores. El marco de la imagen que quieres que se muestre sin que se corte, falla tanto en desktop como en móvil, en todas las páginas de la web. Tus “div” se desbordan del padre y tienes márgenes que están afectando, ojo con el margin de la etiqueta “HTML” de tu página, que trae por defecto algunos navegadores.

      Saludos

    • Manuel Benjumea

      Muchas gracias, tenías razón, la estoy reestructurando cambiando cover por contain y arreglando tema de desbordamientos y márgenes y ya se va viendo mucho mejor.
      Muchas gracias.

    • AlberPedraza

      De nada, un saludo Manuel 🙂

  • Vinyeta

    a mi se me corta la imagen también… ¿Cómo lo habéis solucionado?
    Mi html es este:

    <a href="http://www.momartbags.com&quot;

    Y mi Css es:

    html,body{
    height:100%;
    width:100%;
    margin: 0px;
    }

    #portada {
    padding: 10px 0px 10px 0px;
    background: rgba(0,0,0,0.5);
    color: #00bdff;
    width: 100%;
    }
    #portada a{
    padding: 10px;
    border:none;
    color: white;
    color: #00bdff;
    }
    .kt-flex-fullslide {
    background: url(http://www.momartbags.com/wp-content/uploads/2017/06/portada.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100% ;
    }

    • AlberPedraza

      Hola,
      Prueba con “background-size:contain;” si lo que quieres es que se ajuste la imagen al tamaño del contenedor.

      Saludos

  • Fauricio Valencia

    me funciono, lo hice con el codigo del css, gracias!!, llevaba rato buscandolo

    • AlberPedraza

      De nada, Saludos!