Cómo poner una imagen de fondo en CSS sin que se deforme

Para poner una imagen de fondo en CSS utiliza background-image: url(...). Si quieres cubrir el contenedor sin deformar la imagen, añade background-size: cover. Mantendrá la proporción, aunque puede recortar parte del contenido.

.hero {
  background-image: url('../imagenes/portada.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

La ruta se resuelve desde el archivo CSS cuando la regla está en una hoja externa. Si el CSS está en css/estilos.css y las imágenes en una carpeta hermana, necesitas subir un nivel con ../.

Ejemplo de hero con imagen y capa oscura

<section class="hero">
  <div class="hero-contenido">
    <h1>Diseño web para tu negocio</h1>
    <p>Una presencia digital clara y fácil de usar.</p>
  </div>
</section>
<style>
  .hero {
    box-sizing: border-box;
    min-height: 420px;
    display: grid;
    align-items: center;
    padding: 64px 24px;
    color: white;
    background-color: #0f172a;
    background-image:
      linear-gradient(#0f172ab3, #0f172ab3),
      url('../imagenes/portada.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-contenido { max-width: 720px; }
  .hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; }
</style>

La primera capa se pinta encima de la imagen. El degradado oscurece el fondo sin reducir la opacidad del texto. Sustituye la fotografía y verifica el contraste con esa imagen real, también cuando cambie el recorte.

Cover y contain: cuál elegir

cover llena el área y puede recortar. contain muestra la imagen completa dentro del área, pero puede dejar zonas sin cubrir. Ninguna de las dos deforma la proporción por sí sola.

Evita background-size: 100% 100% si el contenedor no tiene la misma proporción que la imagen: puede estirarla. Si necesitas mostrar un producto completo, un elemento img suele ser más apropiado.

Cómo elegir qué parte queda visible

.hero { background-position: 65% center; }
@media (max-width: 40rem) {
  .hero { background-position: 75% center; padding: 48px 20px; }
}

El porcentaje permite ajustar la posición del recorte. No garantiza que el mismo sujeto quede bien en todos los tamaños. Prueba anchos intermedios y utiliza una composición con espacio disponible para el texto.

Imagen de fondo o etiqueta img

Usa un fondo para decoración. Si la imagen transmite información necesaria, la etiqueta img permite añadir texto alternativo y otras funciones de contenido. Un fondo CSS no tiene atributo alt.

Consulta cómo insertar una imagen en HTML si necesitas mostrar fotografías de producto, capturas explicativas o contenido que deba entenderse sin el fondo.

Por qué no aparece la imagen

• El archivo no existe en la ruta indicada.
• El contenedor está vacío y no tiene altura ni padding.
• Otra regla shorthand background restablece la imagen.
• El servidor devuelve un error o bloquea el recurso.

Revisa la solicitud en Red y el valor calculado de background-image. Comprimir la imagen y servir dimensiones adecuadas ayuda a evitar descargas innecesariamente grandes.

Preguntas frecuentes

¿Debo poner opacity al hero para oscurecerlo?

No si quieres conservar el texto opaco. La propiedad afecta al conjunto; utiliza una capa de fondo como la del ejemplo.

¿Una imagen WebP siempre pesa menos?

No necesariamente. Compara archivos con calidad y dimensiones equivalentes antes de elegir.

Continúa con más ejercicios de CSS.

Referencia técnica: documentación de MDN.