10C-Fondo fijo y con scroll 🖱️

---

10C-Fondo fijo y con scroll en CSS 🖱️

La propiedad background-attachment define si una imagen de fondo permanece fija mientras el usuario se desplaza o si se mueve con el contenido.

1. Fondo fijo: fixed

Cuando el valor es fixed, la imagen se queda "pegada" a la ventana del navegador y no se mueve al hacer scroll.

/* Este código se aplica al `body` para que el fondo sea fijo en toda la página */
body {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-attachment: fixed;
}

2. Fondo con desplazamiento: scroll

Este es el comportamiento predeterminado. La imagen se desplaza junto con el contenido del elemento.

/* Este código se aplica a un elemento para que su fondo se mueva con él */
div {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-attachment: scroll;
}

Ejemplos Visuales

El fondo de este recuadro es fijo. Desplázate para abajo dentro de él y verás cómo el árbol no se mueve.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

El fondo de este segundo recuadro se mueve con el texto. Desplázate dentro de él y verás cómo el árbol sube.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

The background-image is scroll. Try to scroll down the page.

---

Ir al índice