Las imágenes de fondo tienen un gran impacto en la apariencia de cualquier sitio web. Cuando desplazamos una página web/contenido, ¿cuál será el comportamiento de la imagen de fondo?? Si también se moverá con contenido o no.

Bien! Por defecto, la imagen de fondo se desplaza con el contenido. La propiedad de unión de fondo se usa específicamente para determinar la respuesta de la imagen de fondo. Decide el comportamiento de la imagen de fondo utilizando los siguientes valores:

• fijado: Asignar el valor fijo a la imagen de fondo corrigirá la imagen en la página web.
• Desplazarse: El valor de desplazamiento permite que una imagen se desplace con el contenido.
• local: El valor local permite que una imagen se desplace con el contenido de un elemento.

Esta redacción proporcionará una comprensión detallada de la propiedad de unión de fondo en CSS. Para una mejor comprensión, este artículo considerará algunos ejemplos con diferentes valores de unión de fondo.

Sintaxis

El fragmento a continuación describe la sintaxis de la propiedad de unión de fondo

Atacamiento de fondo: valor

Discutamos qué valores puede tomar la propiedad de atacamiento de antecedentes.

Valor fijo

El "fijado" El valor establece la imagen en una posición específica. La imagen no se movería con el contenido.

Ejemplo

El código dado a continuación explicará cómo establecer el fijado valor para la propiedad de unión de fondo

Html

IMAGEN DE ACTUALO: fijo

Todo el contenido escrito aquí!

CSS

cuerpo
IMAGEN DE ANTECEDENTES: URL ("Cubierta.jpg ");
Background-Repeat: sin repetición;
Posición de fondo: superior izquierda;
Atacamiento de fondo: fijo;

El código anterior genera la siguiente salida:

La salida aclara que la imagen permanece fija.

valor de desplazamiento

El "Desplazarse" el valor nos permite desplazar la imagen con el contenido. Para una mejor comprensión, considere el siguiente código dado:

Html

IMAGEN DE ANTECEDENTES: desplazamiento

Todo el contenido escrito aquí!

CSS

cuerpo
IMAGEN DE ANTECEDENTES: URL ("Cubierta.jpg ");
Background-Repeat: sin repetición;
Posición de fondo: superior izquierda;
Atacamiento de fondo: desplazamiento;

El código anterior producirá la siguiente salida:

valor local

El valor local mueve la imagen con el contenido del elemento. Sin embargo, si implementa el local en el ejemplo anterior, el resultado se verá igual que el valor de desplazamiento. Entonces, cómo podemos diferenciar los valores locales y de desplazamiento?

La diferencia entre los valores locales y de desplazamiento se puede notar en un escenario en el que hay múltiples áreas desplazables en una página web.

Ejemplo

Este ejemplo proporcionará el código para el valor local para las múltiples áreas desplazables.

Html

IMAGEN DE ANTECEDENTES: LOCAL

Todo el contenido viene aquí

CSS

.caja

Ancho: 500px;
Altura: 500px;
margen: 100px;
borde: 10px negro sólido;
desbordamiento: auto;
IMAGEN DE ANTECEDENTES: URL ("Cubierta.jpg ");
Background-Repeat: sin repetición;
Atacamiento de fondo: local;

La salida del código dado anterior será así:

Hay dos barras de desplazamiento en la salida anterior. Cuando movemos cualquier barra de desplazamiento,.mi. interna o externa La imagen se mueve con el contenido.

En el código anterior, use Scroll en lugar de local y observe la diferencia.

Desplazamiento

Atacamiento de fondo: desplazamiento;

La siguiente salida aparecerá para el valor de desplazamiento:

Hay dos barras de desplazamiento. Cuando desplazamos la barra exterior, la imagen se mueve con el contenido. Y cuando desplazamos la imagen de la barra interna permaneció fija.

Conclusión

La propiedad de unión de fondo especifica cómo se comportará una imagen de fondo. Se necesitan tres valores, es decir. fijo, desplazamiento, local. "fijado" Para arreglar la imagen en una posición específica, "Desplazarse" para mover la imagen con contenido y "local" Para mover la imagen con el contenido del elemento.

Este artículo presentó una descripción detallada de la propiedad de unión de fondo. Además, este artículo demostró cómo usar el valor fijo, desplazado y local para la propiedad de archivo adjunto.