Si estás maquetando una web y quieres añadir imagen en css con background image, esto te interesa. Muchos se lían con la sintaxis, con las rutas o con por qué no se ve nada al recargar. Aquí te lo cuento sin rodeos, con lo que de verdad funciona en 2026.
La propiedad background-image es la que te permite poner una imagen de fondo en cualquier elemento HTML. No necesitas etiquetas ni nada raro: solo CSS. Y sí, sigue siendo igual de válida que hace años, aunque ahora se combine con otras propiedades para que quede perfecta.
Qué es exactamente background-image y por qué usarlo
Cuando hablamos de css background image, nos referimos a la propiedad que define una o varias imágenes como fondo de un elemento. Puede ser un div, un body, un header o lo que se te ocurra. La clave está en que esa imagen se coloca detrás del contenido y no afecta al flujo del documento.
Personalmente lo uso muchísimo para hero sections, tarjetas con foto de fondo o para dar ambiente a un bloque sin cargar un adicional. Eso sí, ojo con el SEO: Google no indexa las imágenes de fondo como contenido, así que si la imagen aporta información relevante, mejor usa una etiqueta
con su alt correspondiente.
Sintaxis básica para poner una imagen de fondo en CSS
El comando es simple, pero hay que escribirlo bien. La forma más directa es esta:
background-image: url(https://www.tudominio.com/images/foto.jpg);
Fíjate en que la URL va entre paréntesis y sin comillas (aunque puedes ponerlas simples o dobles si quieres, el navegador lo acepta). Donde pone tudominio.com pones el dominio real donde esté alojada la imagen. Si es tu propio servidor, perfecto; si es externo, también vale siempre que no esté bloqueada.
Un detalle que muchos pasan por alto: si la imagen está en un servidor externo y tiene protección .htaccess o reglas anti-hotlinking, no se verá. Ahí no hay magia posible. O la descargas a tu servidor o pides permiso.
Cómo elegir entre ruta relativa o absoluta
Esto es un clásico que genera dudas. Puedes usar rutas relativas si la imagen está en tu mismo proyecto, por ejemplo:
- ./imagenes/fondo.jpg si está en una carpeta hermana
- ../assets/bg.png si está un nivel arriba
- /wp-content/uploads/2026/01/foto.webp desde la raíz del dominio
Yo recomiendo rutas absolutas cuando trabajas con WordPress o cualquier CMS, porque evitas sustos si mueves el CSS de sitio. Y si la imagen es externa, siempre con https para no romper la seguridad de la página.
Ajustes imprescindibles: tamaño, posición y repetición
Poner la imagen es solo el primer paso. Si no tocas nada más, se repetirá como un mosaico y quedará horrible. Aquí entran en juego varias propiedades que deberías dominar:
- background-size: cover; para que cubra todo el contenedor sin deformarse
- background-size: contain; si quieres que se vea entera aunque queden bordes
- background-position: center center; para centrarla
- background-repeat: no-repeat; para que no se duplique
- background-attachment: fixed; si quieres efecto parallax (con cuidado en móvil)
Con cover y center ya tienes el 90% de los casos resueltos. Es lo que uso casi siempre para banners y cabeceras.
Ejemplo práctico completo listo para copiar
Te dejo un bloque que funciona tal cual. Cámbialo a tu gusto:
.mi-seccion {
background-image: url(https://www.tudominio.com/images/hero-2026.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 400px;
}
Con eso tienes una sección con imagen de fondo que se adapta al ancho y mantiene la proporción. Si necesitas que el texto se lea bien, añade un overlay con un gradiente o un color semitransparente encima. Es un truco viejo pero sigue salvando diseños.
Errores típicos que te harán perder tiempo
El fallo número uno es la ruta mal escrita. Revisa mayúsculas, extensiones y que la imagen exista de verdad. Otro clásico es olvidar el background-size y encontrarte la foto repetida como un patrón cutre.
También pasa mucho en WordPress: si añades la imagen desde el personalizador, a veces se genera un CSS inline que sobreescribe el tuyo. Usa la consola del navegador para ver qué regla gana. Y si trabajas con caché, limpia antes de volverte loco.
Un detalle sobre rendimiento: las imágenes de fondo grandes penalizan el LCP. En 2026, con Core Web Vitals tan en cuenta, usa formatos modernos como WebP o AVIF y comprime antes de subirlas. No es opcional si quieres posicionar.
Background-image múltiple y gradientes combinados
Puedes poner varias imágenes de fondo separadas por comas. La primera queda encima y las siguientes debajo. Esto se usa para combinar un gradiente con una foto:
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(foto.jpg);
Así oscureces la foto sin necesidad de editar la imagen. Muy útil para textos legibles sobre fondos claros. Yo lo aplico en casi todos los heroes que maqueto.
Cuándo NO usar background-image
Si la imagen es contenido relevante (un producto, una infografía, una foto que aporta información), no la pongas de fondo. Usa con su atributo alt. Google indexa eso, y los lectores de pantalla también lo leen. El background es decorativo, no informativo.
Dicho esto, para adornos, texturas o fondos de sección, background-image es perfecto. Ligero, flexible y fácil de controlar con media queries para adaptarlo a móvil.
Si te surge cualquier duda concreta, déjame un comentario abajo y te echo una mano. Esto se aprende practicando, no memorizando.
