Imagen background

Actualmente los esfuerzos de los diseñadores por conseguir el diseño mas bonito para destacar de su competencia, son muy avanzados, pero para conseguir plasmar ese diseño en una página Web requiere unos conocimientos profesionales de programación. Pero, es cierto que hoy en día los lenguajes de programación, disponen de herramientas muy sofisticadas que nos permiten desarrollar esa página Web impresionante.

Ajustar todos los contenidos de la página para verse perfectamente en ordenadores, tablets y móviles, gracias a Frameworks disponibles gratuitamente ya no es difícil y si dominamos los diferentes códigos de programación con unos trucos, estilos y scripts, daremos a los contenidos un comportamiento eficaz.

En este snippet damos dos ejemplos para utilizar una imagen como fondo de una capa y como alinear los contenidos que se ven encima. El primero con la ayuda de un script en jQuery ajustamos la imagen para que se adapte a las medidas de la ventana del navegador en cualquier medida de pantalla y alinea sus contenidos. El segundo hace lo mismo pero adapta la imagen a una altura de capa concreta y no requiere ningún script.

Altura dinámica

En este snippet vamos a cargar una imagen en el fondo de un div, ajustando este a las medidas de la ventana del navegador donde es vista la página, este ajuste de las medidas se calcula con la ayuda de script en jQuery y se vuelca dinamicamente a la clase current-height.

Los contenidos que se ven por encima, podemos alinearlos tanto horizontal como vertical, con clases de estilo CSS.

Veamos el markup, de imagen background para una altura dinámica.

HTML


<div class="background-wrap current-height">
  <div class="background">
    <div class="content-wrap current-height">
      <div class="content-box">
        <h1 class="title">Imagen background full window</h1>
        <p class="paragraph">Ajusta perfectamente un background de imagen a la ventana y posiciona los contenidos.</p>
      </div>
    </div>
  </div>
</div>

Los estilos son bastante sencillos y lo mas destacable es que utilizamos el pseudo-elements :before para cargar la imagen, de esta manera podremos jugar con la opacidad de la imagen sin que afecte a los contenidos que están por encima, pero esto ya lo explicaremos en otro snippet.

Para alinear los contenidos que están por encima, la alineación horizontal con un text-align se resuelve facilmente y para la vertical utilizo las propiedades de display table y table-cell con un vertical-align. En este caso el alineado vertical utilize este método pero yo recomiendo cargarte el Bootstrap 4 y utilizar el grid con la alineación de flex.

Cuando la página se visualiza en pantallas anchas, a partir de 768 pixeles, le damos a la imagen un comportamiento diferente con el scroll, la propiedad background-attachment le añade una posición fixed. Aunque de no gustarte este efecto se lo puedes quitar.

Estos son los estilos aportados.

CSS


body {
  font-family: sans-serif;
  margin: 0;
}
.background-wrap {
  background-color: #ffffff;
  margin: 0;
}
.background {
  position: relative;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
}
.background:before {
  content: ''; 
  display: block;
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://www.smoothemes.es/media/images/bg-keyboard.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
@media (min-width: 768px) {
  .background:before {
    background-attachment: fixed;
  }
}
.content-wrap {
  display: table;
  margin: 0;
  padding: 0 20px;
}
@media (min-width: 576px) { .content-wrap { padding: 0 40px; } }
@media (min-width: 768px) { .content-wrap { padding: 0 60px; } }
@media (min-width: 992px) { .content-wrap { padding: 0 100px; } }
@media (min-width: 1200px) { .content-wrap { padding: 0 120px; } }
.content-box {
  margin: 0;
  padding: 0;
  display: table-cell;
  vertical-align: middle;
}
.title {
  font-size: 40px;
  margin: 0 0 20px 0;
  padding: 0;
  color: #5680cf;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
  opacity: 0;
}
@media (min-width: 576px) { .title { font-size: 50px; } }
.paragraph {
  font-size: 18px;
  margin: 0;
  padding: 0;
  color: #a61717;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.background,
.title,
.paragraph {
  -webkit-transition: opacity 2.0s ease-in-out;
  -moz-transition: opacity 2.0s ease-in-out;
  -ms-transition: opacity 2.0s ease-in-out;
  -o-transition: opacity 2.0s ease-in-out;
  transition: opacity 2.0s ease-in-out;
}
@media (min-width: 576px) { .paragraph { font-size: 20px; } }
.loaded .background,
.loaded .title,
.loaded .paragraph {
  opacity: 1;
}

Este script se encarga de calcular la altura actual de la ventana y corrige dinámicamente las medidas de las capas, estos datos dinámicos son volcados a la clase current-height. Aparte añade otra clase a la etiqueta body, cuando la página este cargada, así se carga todo perfectamente. Recuerda incluir antes la librería de jQuery.

jQuery


function calculateHeight() {
  var currentHeight = $(window).height();
  $('.current-height').css({'height':currentHeight+'px'});
}
calculateHeight();
window.addEventListener('load', function() {
  $('body').addClass('loaded');
  calculateHeight();
});
window.addEventListener('resize', function() {
  calculateHeight();
});

Se puede ver como funciona el ejemplo en CodePen.

See the Pen Imagen background full window by Smoothemes (@smoothemes) on CodePen.0

Altura ajustable

En este otro snippet vamos a cargar una imagen en el fondo de un div y la altura de esta capa dependerá si se le quiere dar una altura justa o que los mismos contenidos le den su propia altura, con sus paddings y márgenes. En este snippet no utilizamos jQuery.

Para la alineación de los contenidos utilizamos los mismos casos que lo explicado arriba, son estilos sencillos con CSS

Veamos el markup, de imagen background para una altura ajustable.

HTML


<div class="background-wrap">
  <div class="background">
    <div class="content-wrap">
      <div class="content-box">
        <h1 class="title">Imagen background height</h1>
        <p class="paragraph">Ajusta perfectamente un background de imagen a una altura y posiciona los contenidos.</p>
      </div>
    </div>
  </div>
</div>

Estos son los estilos, la explicación extendida la puedes ver arriba.

CSS


body {
  font-family: sans-serif;
  margin: 0;
}
.background-wrap {
  background-color: #ffffff;
  margin: 0;
}
.background {
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.background:before {
  content: ''; 
  display: block;
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://www.smoothemes.es/media/images/bg-keyboard.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
@media (min-width: 768px) {
  .background:before {
    background-attachment: fixed;
  }
}
.content-wrap {
  margin: 0;
  padding: 200px 20px;
}
@media (min-width: 576px) { .content-wrap { padding: 180px 40px; } }
@media (min-width: 768px) { .content-wrap { padding: 240px 60px; } }
@media (min-width: 992px) { .content-wrap { padding: 240px 100px; } }
@media (min-width: 1200px) { .content-wrap { padding: 240px 120px; } }
.title {
  font-size: 50px;
  margin: 0 0 20px 0;
  padding: 0;
  color: #5680cf;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
}
@media (min-width: 576px) { .title { font-size: 60px; } }
.paragraph {
  font-size: 20px;
  margin: 0;
  padding: 0;
  color: #a61717;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
@media (min-width: 576px) { .paragraph { font-size: 22px; } }

Se puede ver como funciona el ejemplo en CodePen.

See the Pen Imagen background height by Smoothemes (@smoothemes) on CodePen.0