12-repeticion de fondos en css

---

Repetición de fondos en CSS

• CSS Background Image Repeat
• CSS background-repeat
• CSS background-repeat: no-repeat
• CSS background-position

---

CSS Background Image Repeat

La propiedad background-image en CSS permite establecer una imagen de fondo en cualquier elemento HTML. Por defecto, esta imagen se repite tanto horizontal como verticalmente. A veces, esto no es deseado, por lo que se puede controlar su repetición.

Ejemplo de código:

body {
    background-image: url('fondo.jpg');
    background-repeat: repeat;
}

Ejemplo Visual:

Este es un ejemplo de cómo se repite la imagen de fondo en el elemento. La imagen es pequeña y se repite tanto horizontal como verticalmente.

---

...

CSS background-repeat

La propiedad background-repeat controla la repetición de la imagen de fondo. Se pueden utilizar diferentes valores para ajustar la repetición:

• repeat: la imagen se repite tanto horizontal como verticalmente (valor por defecto).
• repeat-x: la imagen solo se repite horizontalmente.
• repeat-y: la imagen solo se repite verticalmente.
• no-repeat: la imagen no se repite en ninguna dirección.

Ejemplo de código:

body {
    background-image: url('fondo.jpg');
    background-repeat: repeat-x;
}

Ejemplo Visual - Repeat:

Este es un ejemplo donde la imagen se repite en ambas direcciones, horizontal y vertical.

Ejemplo Visual - Repeat-x:

Este ejemplo muestra cómo la imagen de fondo se repite solo en la dirección horizontal.

Ejemplo Visual - Repeat-y:

Este ejemplo muestra cómo la imagen de fondo se repite solo en la dirección vertical.

Ejemplo Visual - No-repeat:

Este ejemplo muestra cómo la imagen de fondo no se repite, solo se muestra una vez.

---

CSS background-repeat: no-repeat

El valor no-repeat en la propiedad background-repeat evita que la imagen de fondo se repita, mostrándola solo una vez. Este valor es útil cuando se quiere mostrar una imagen de fondo única en un contenedor sin repetirse.

Ejemplo de código:

body {
    background-image: url('fondo.jpg');
    background-repeat: no-repeat;
}

Ejemplo Visual - No-repeat:

Este es un ejemplo donde la imagen de fondo se muestra una sola vez sin repetirse.

---

CSS background-position

La propiedad background-position se utiliza para especificar la posición inicial de la imagen de fondo dentro de su contenedor. Esta propiedad acepta valores como top, center, y left, entre otros. También se puede usar en combinación con porcentajes o unidades como px.

Ejemplo de código:

.mi-div {
    background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
    background-repeat: no-repeat;
    background-position: top right;
}

Ejemplo Visual - background-position: top right:

Este es un ejemplo donde la imagen de fondo está posicionada en la esquina superior derecha del contenedor.

The CSS Background Repeat and Position Properties

Property	Description
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated

---

Ir al índice

---

---