Background Responsive a Pantalla Completa con CSS

Vamos a ver ahora cómo hacemos que la imagen ocupe todo el ancho del navegador. Lo primero de todo será crear nuestro código HTML:

<!doctype html>
<html>
   <body>
  ...Aquí tu contenido...
   </body>
</html>

Lo único que hará falta poner en el código HTML es el enlace a la hoja de estilos CSS donde daremos vida a nuestra imagen 100% responsive. Tal y como hemos visto, la regla de CSS más importante aquí va a ser esta:

background-size: cover;

Veamos ahora el código CSS:

body {
  /* Ubicación de la imagen */
  background-image: url(images/background-photo.jpg);

  /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
  background-position: center center;

  /* La imagen de fondo no se repite */
  background-repeat: no-repeat;

  /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
     la altura del contenido supere la altura de la imagen. */
  background-attachment: fixed;

  /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
     del navegador */
  background-size: cover;

  /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
  background-color: #464646;
}

Podemos reescribir este código en una sola línea y quedaría así:

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}

 

Write a comment