10B-Fondo con y sin repetición en CSS 🔄

---

10B-Fondo con y sin repetición en CSS

La propiedad background-repeat controla cómo se repite una imagen de fondo para cubrir el área de un elemento. Esta propiedad es crucial para lograr el efecto visual deseado, ya sea un patrón repetido o una sola imagen fija.

1. Fondo sin repetición: no-repeat

Para evitar que una imagen de fondo se repita, se usa el valor no-repeat. Esto hace que la imagen aparezca una sola vez, por lo general en la esquina superior izquierda del elemento.

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

2. Repetición horizontal y vertical

Puedes controlar la repetición en una sola dirección con los valores repeat-x (horizontal) y repeat-y (vertical).

Repetir horizontalmente: repeat-x

Utiliza este valor para crear un patrón que se extienda a lo largo de todo el ancho del elemento.

background-repeat: repeat-x;

Repetir verticalmente: repeat-y

Este valor es útil para crear un borde vertical o un patrón que se repita de arriba a abajo.

background-repeat: repeat-y;

3. Combinando con background-position

La propiedad background-position se puede usar junto con no-repeat para colocar la imagen en cualquier lugar del contenedor sin que se repita.

background-repeat: no-repeat;
background-position: center;

Ejemplos Visuales

`repeat-x`

`repeat-y`

`no-repeat` y `center`

---

Ir al índice