10A-Fondo con Imágenes en CSS 🖼️

---

Fondos con Imágenes en CSS

La propiedad background-image es esencial para establecer una imagen como fondo de un elemento. Por defecto, si la imagen es más pequeña que el elemento, se repite horizontal y verticalmente hasta cubrir todo el espacio.

1. Propiedades clave para la imagen de fondo

Para controlar cómo se muestra la imagen, se usan otras propiedades que trabajan junto con background-image.

background-repeat

Define si la imagen de fondo se repite. Los valores más comunes son:

• repeat: La imagen se repite en ambas direcciones (predeterminado).
• no-repeat: La imagen aparece una sola vez.
• repeat-x: La imagen se repite solo horizontalmente.
• repeat-y: La imagen se repite solo verticalmente.

background-image: url("ruta/a/imagen.jpg");
background-repeat: no-repeat;

background-position

Permite colocar la imagen de fondo en una posición específica dentro del elemento. Puedes usar palabras clave (center, top, bottom, left, right) o coordenadas.

background-position: center;

background-size

Ajusta el tamaño de la imagen de fondo. Los valores más útiles son:

• cover: La imagen se redimensiona para cubrir todo el contenedor.
• contain: La imagen se ajusta para ser completamente visible dentro del contenedor.

background-size: cover;

Nota: Cuando uses una imagen de fondo, elige una que tenga buen contraste o aplícale un filtro para que el texto sea siempre legible.

Ejemplos Visuales

`background-repeat` por defecto

`no-repeat` y `center`

`repeat-x`

`background-size: cover`

`background-size: contain`

---

Ir al índice