Como poner una imagen de fondo en HTML


La forma correcta de poner una imagen de fondo en una página HTML es utilizando hojas de estilo (conocidas como CSS).

Antes de continuar, quiero dejarte un enlace para que puedas descargar el código final para mostrar una imagen de fondo en una página HTML.

En este ejemplo vamos a trabajar con una estructura de archivos y carpetas como esta:

Estructura de carpetas para imagen de fondo en HTML

En donde hay una carpeta para las imágenes llamada img, una carpeta para las hojas de estilo llamada css y un archivo html llamado index.htmlm.

Podemos colocar una imagen de fondo sobre cualquier elemento HTML, como la página completa, una caja de texto, una sección, etc. Ahora vamos a agregar la imagen de fondo sobre una sección de la página, como se ve en este ejemplo:

Ejemplo de una página HTML con imagen de fondo

Como agregar una imagen de fondo.

Primero crea un archivo HTML, en mi caso se llama index.html y tiene este contenido:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/estilos.css">
    <title>Imagenes de fondo</title>
  </head>
  <body>
    <div class="image-fondo cabecera">
        <h1>Título de la página</h1>
    </div>

    <p>Algun texto muy grande.....</p>
  </body>
</html>

Lo importante en el código anterior es incluir a la hoja de estilo, en este caso se llama css/estilos.css y colocar una clase en la que podamos agregar el código CSS para mostrar la imagen de fondo, en este caso la clase se llama image-fondo. Al agregar la clase image-fondo en la etiqueta DIV, le hemos dicho al navegador web que, al mostrar este elemento, procese el formato especificado en la hoja de estilo para esta clase.

Archivo HTML para mostrar una imagen de fondo.

Ahora veamos el código de la hoja de estilo, que es la que muestra la imagen de fondo:

.image-fondo {
    background-image: url("../img/fondo.jpg");
}

.cabecera{
  color: #fff;
  height: 200px;
  line-height: 200px;
  text-align: center;
  vertical-align: middle;
  text-shadow: #111 0px 0px 10px;
}

Lo importante aquí es el código de la clase .image-fondo, en la hoja de estilo le agregamos un punto al inicio del nombre de la clase. Aquí usamos el atributo background-image luego colocamos : y una lista de parámetros, en este caso solo he usado url("../img/fondo.jpg"), entre las comillas está el nombre de la imagen de fondo.

Como la hoja de estilo está dentro de una carpeta usamos ../ para saltar a la carpeta anterior, luego usamos img/ para que busque dentro de la carpeta img y finalmente le decimos el nombre del archivo a cargar.

Ruta de la imagen de fondo

En la clase .cabecera solo hemos definido un formato para decirle que tan alto debe ser este elemento (200 pixeles) y el formato para el título que se muestra.

El resultado será algo como esto:

Imagen de fondo (imagen se duplica)

Pero hay un problema, si la pantalla es más grande que la imagen, entonces el navegador coloca la misma imagen a la par, y eso hace que todo se vea mal.

Como definir el tamaño de la imagen de fondo

Para corregir el problema de que la pantalla sea más grande que la imagen de fondo podemos usar el atributo background-size con el valor cover.

Con esto el navegador se encargará de estirar y recortar la imagen para que cubra toda el área sin perder las proporciones de la imagen.

La hoja de estilo final quedara así:

.image-fondo {
    background-image: url("../img/fondo.jpg");
    background-size: cover;

}

.cabecera{
  color: #fff;
  height: 200px;
  line-height: 200px;
  text-align: center;
  vertical-align: middle;
  text-shadow: #111 0px 0px 10px;
}

Y el resultado final será este:

Imagen de fondo en HTML, resultado final.

Conclusión

Espero que hayas disfrutado este artículo.

Como puedes ver solo necesitas agregar el formato en una clase dentro de una hoja de estilo y luego agregar esa clase en algún elemento HTML, que también pudo ser la etiqueta BODY para que se aplique en toda la página web.

Ahora me gustaría conocer tu opinión, ¿estuvo todo claro en este articulo?, ¿tienes alguna duda?