13-Imagen como adjunta en css

---

CSS background-attachment

• CSS background-attachment
• CSS fondo - Propiedad de mano

---

CSS background-attachment

La propiedad background-attachment en CSS controla si la imagen de fondo se desplaza con el contenido de la página o si permanece fija al hacer scroll.

Cuando se establece en fixed, la imagen de fondo permanece fija mientras se desplaza el contenido. Si se establece en scroll, la imagen de fondo se mueve con el contenido de la página.

A continuación se muestran ejemplos de ambos casos:

Ejemplo de código:

/* Fondo fijo */
body {
    background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

En este ejemplo, la imagen de fondo no se mueve cuando se hace scroll, ya que se ha utilizado background-attachment: fixed.

/* Fondo que se desplaza con el contenido */
body {
    background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
}

En este otro ejemplo, la imagen de fondo se desplaza con el contenido de la página, ya que se ha utilizado background-attachment: scroll.

---

CSS fondo - Propiedad de mano

La propiedad background-position en CSS especifica la posición de la imagen de fondo en el contenedor. Se puede usar para ajustar la ubicación de la imagen dentro del contenedor de una página web.

La propiedad toma valores como top, center, bottom y left, right, así como valores numéricos en píxeles o porcentajes.

A continuación se muestran ejemplos de cómo se aplica esta propiedad:

Ejemplo de código:

/* Fondo centrado */
body {
    background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

En este ejemplo, la imagen de fondo se centra en el contenedor y no se repite.

/* Fondo con posicionamiento especificado en píxeles */
body {
    background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
    background-repeat: no-repeat;
    background-position: 50px 100px;
    background-attachment: fixed;
}

En este otro ejemplo, la imagen de fondo se coloca a 50 píxeles desde la izquierda y a 100 píxeles desde la parte superior del contenedor.

---

Ejemplos Visuales

Ejemplo con background-attachment: fixed

Ejemplo con background-attachment: scroll

---