¿Cómo cubrir todo el fondo con una imagen con CSS?

16-09-2014 - Andrés Cruz

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Definiendo el HTML

En el HTML no hay ninguna novedad; HTML clásico con el contenido que desees mostrar:

<html>
<html>
<body>
  Su contenido
</body>
</html>

Definiendo el CSS

Expliquemos las reglas que componen a nuestro CSS; todas son opcionales a excepción de una:

(Obligatorio) background-size

Emplearemos el valor cover de la propiedad background-size de CSS que nos hará casi todo el trabajo; en conjunto con otras reglas que ayudarán a mejorar la experiencia final.

La propiedad background-size define cómo se va a mostrar la imagen a establecer en el fondo; con el valor cover: "especifica que la imagen de fondo debe ser escalada lo más pequeño como sea posible asegurando al mismo tiempo tanto en sus dimensiones mayores o iguales que a las dimensiones correspondientes al área de posicionamiento de fondo." (Mozilla Developer ).

Para entender un poco mejor la idea veamos un par de ejemplos; te invito a que redimensiones la ventana y vea su comportamiento:

background-size: cover;

(Opcional) background-position

Permite controlar la posición de las imágenes de fondo; con el valor center center; centrar la imagen en sus coordenadas X y Y; emplear esta propiedad es opcional pero recomendable debido a que generalmente el contenido más impactante de la imagen esta ubicado en el medio de la misma.

background-position: center center;

(Opcional) background-attachment

Establece el comportamiento que tendrá la imagen cuando hay un scroll presente; con el valor fixed se mantiene en una posición fija incluso cuando haya scroll en su elemento contenedor, tiene un comportamiento similar al de la regla posicion: fixed;.

background-attachment: fixed;

A la final estas son todas las reglas a aplicar:

  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-image: url(img/background_2500.jpg);

(Opcional) Media Query

Otro posible agregado consisten en el uso de los Media Query; con los Media Query se pueden establecer imágenes acorde a la resolución del dispositivo (teléfono, tablet, computador) que está accediendo a la página; es decir si el usuario accede desde un dispositivo que tenga una resolución de 1280x720 píxeles no tiene mucho sentido utilizar una imagen con dimensiones mayores ya que el detalle no se va a apreciar y además, tardaría más tiempo en cargar; esto lógicamente afecta el rendimiento en general del site y la experiencia del usuario final; utilizar una imagen de menores dimensiones a la resoluciòn del dispositivo tampoco es buena idea en la mayoría de las ocasiones porque se mostraría pixeladas; podríamos establecer unos Media Querys como los siguientes:

@media only screen and (max-width: 480px) {
  body {
    background-image: url(images/background_480.jpg);
  }
}

@media only screen and (max-width: 1280px) {
  body {
    background-image: url(images/background_1280.jpg);
  }
}

Cada media query contiene una sencilla regla que indica la url de la imagen a cargar; como podrás haberte dado cuenta, el nombre de la imagen indica el ancho de la misma; es decir:

El anchio de background_1980.jpg es de 1980px
El anchio de background_1280.jpg es de 1280px
El anchio de background_480.jpg es de 480px

Básicamente se especifican una serie de reglas que se ejecutan o no dependiendo de las dimensiones de la pantalla del dispositivo que accede al site, específicamente del valor máximo del ancho que puede tener la pantalla del dispositivo para ejecutar su CSS interno; es decir, si un usuario accede con un dispositivo que tiene 480px o 320px de ancho, se ejecutará el primer media query y esto evitará la carga de la imagen que posee un ancho de 2500px, si el dispositivo tiene 980px o 1280px de ancho, entonces se ejecutará la segunda regla; de esta forma son cargadas imágenes de menores dimensiones y por lo tanto de un menor peso que se ajustan de una mejor a las especificaciones del dispositivo; hay que tener en cuenta que cargar una imagen de mayor dimensiones a la que se necesite solo traerá que se ralentice la carga del site.

Puedes ver el ejemplo final dando clic aquí.

Responsive CSS

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy