Cómo poner y cambiar una imagen de fondo en HTML

¿Habías escuchado que las personas recuerdan solo el 20 % de lo que leen, pero 80 % de lo que ven? Si bien se debaten los porcentajes exactos, la idea sigue siendo la misma: es más fácil para las personas aprender y procesar la información visualmente.

Es por eso que la mayoría de los sitios web conocen la importancia de utilizar imágenes. Estas ayudan a que el contenido sea más informativo, atractivo y memorable. Además, mejoran la experiencia del visitante y ayudan a impulsar el tráfico de búsqueda orgánica.

Google imágenes (y no el buscador habitual) es un motor de búsqueda importante por sí solo y otra forma en que las personas pueden encontrar un sitio web. Por lo tanto, proporcionar contenido e imágenes de alta calidad puede ayudarte a clasificar tus palabras clave objetivo y atraer tráfico a tu sitio. En 2019, HubSpot hizo exactamente esto, lo que llevó a un crecimiento interanual del 25 % en el tráfico orgánico que provenía de la búsqueda web y de imágenes.

Ahora que puedes ver por qué las imágenes son importantes, te ayudaremos a aprender a agregarlas a una página. Si utilizas una plataforma de creación de sitios web como CMS Hub o WordPress entonces será más fácil de lo que crees: tan solo haz clic en el icono de imagen en tu barra de herramientas, selecciona una imagen de tu administrador de archivos e insértala.

Si no utilizas un creador de sitios web de front-end, aún puedes añadir imágenes a tu sitio web. Solo necesitas saber algo de HTML, así que repasaremos un poco el proceso.

El código se verá así: <img src = "URL" alt = "texto descriptivo">

Una imagen se conoce como un «elemento vacío» en HTML, ya que mientras que los elementos como un párrafo consisten en una etiqueta de apertura y una de cierre con contenido en el medio, una imagen no tiene una etiqueta de cierre. Además, una imagen especifica su contenido con atributos en la etiqueta de apertura.

Compara las siguientes líneas de código para ver la diferencia entre un párrafo y una imagen:

¿Observas los dos atributos en el código de imagen de arriba? Ambos son básicos para la inserción de una imagen, te explicamos más al respecto a continuación.

Un elemento de imagen siempre debe tener un atributo src (fuente), que contiene la URL de la imagen o la ruta del archivo. De lo contrario, el navegador no sabrá qué renderizar. Ahora bien, un navegador puede representar una imagen sin el atributo alt, pero se considera una práctica recomendada incluirlo. Eso es porque este atributo contiene el alt text de la imagen o texto alternativo.

El texto alternativo de la imagen es importante por varias razones: primero, aparecerá en lugar de una imagen si esta no se carga en la pantalla de un usuario. En segundo lugar, ayuda a las herramientas de lectura de pantalla a describir imágenes a lectores con discapacidad visual que podrían tener problemas para comprenderla sin ella. En tercer lugar, permite a los motores de búsqueda rastrear y clasificar mejor tu sitio web.

También puedes ver un atributo de estilo que contiene el ancho y el alto de la imagen. Especificar el ancho y el alto puede ayudar a evitar que la página web parpadee mientras se carga la imagen. Así es como se vería el código con estos atributos adicionales:

Es importante que tengas en cuenta que también puedes especificar el tamaño de una imagen utilizando CSS interno o externo, en lugar de CSS en línea. Para conocer la diferencia entre estos tres tipos de CSS, consulta nuestra guía sobre cómo agregar CSS a HTML (contenido en inglés).

1. Utiliza la propiedad CSS background-image

Si deseas establecer una imagen como fondo de una página web o un elemento HTML, en lugar de simplemente insertar la imagen, tendrás que utilizar la propiedad CSS background-image, la cual es el reemplazo del atributo background-image en versiones anteriores de HTML. La buena noticia es que es mucho más flexible y predecible que el atributo HTML, y sigue siendo fácil de usar.

Para establecer el valor de background-image debes utilizar la siguiente sintaxis: url ('');

Entre las comillas simples, colocarás la URL de la imagen o la ruta del archivo.

2. Inserta una imagen de fondo en una página

Para empezar, vamos a suponer que deseas establecer una imagen como fondo de toda la página. En este caso, debes aplicar CSS al elemento del cuerpo. Con un selector de CSS puedes definir la propiedad de la imagen de fondo en la sección principal de tu archivo HTML o en una hoja de estilo externa. Para esta demostración, te pondremos de ejemplo la misma imagen anterior y cambiaremos el color del texto a blanco para que puedas verlo.

Aquí está el CSS:

Aquí está el HTML: 

Este es el resultado: 

3. Elimina el efecto mosaico de la imagen de fondo

Después de elegir la imagen que deseas, puede que, en caso de ser más pequeñas que el navegador, se coloque de forma predeterminada en mosaico. Este es un ejemplo: 

Para evitar que esto suceda, puedes usar la propiedad background-repeat y establecerla en no-repeat.

Aquí está el CSS:

El HTML sigue siendo el mismo. Así es como se vería ahora en la interfaz:

4. Elimina los espacios en blanco en la imagen de fondo

Si bien resolviste el problema del mosaico, ahora tienes muchos espacios en blanco adicionales debajo y a la derecha de la imagen. Para asegurarte de que la imagen de fondo cubra todo el elemento del cuerpo o, en otras palabras, ocupe toda la ventana del navegador, puedes usar la propiedad background-size y configurarla para que cubra. Luego, para no deformar sus dimensiones usa la propiedad background-adjunto y configúrala como fija. De esa forma, la imagen mantendrá sus proporciones originales.

El HTML sigue siendo el mismo, pero la interfaz ahora luce de esta manera:

Cómo poner una imagen de fondo en un elemento HTML

También puedes establecer una imagen como fondo de un elemento HTML en lugar de la página web completa.

Por ejemplo, puedes colocar elementos HTML dentro de un div y luego apuntar al div con las propiedades CSS que usamos anteriormente. Una diferencia es que en lugar de establecer la propiedad background-size para cubrir, la vas a establecer en 100 % 100 %. Eso significa que la imagen se estirará horizontal y verticalmente según sea necesario para ajustarse a todo el elemento div, sin conservar sus dimensiones originales.

Aquí está el CSS:

Este es el HTML: 

Y este es el resultado: 

Agregar imágenes en tu sitio web es importante tanto para la experiencia del visitante como para los motores de búsqueda. Como pudiste ver, es fácil si estás creándolo con un sistema de administración de contenido o desde cero. Solo necesitas saber algo de HTML y CSS.