Para establecer una imagen detrás del elemento, el "imagen de fondo"La propiedad de CSS entra en juego. Por defecto, aparece en la esquina superior izquierda de la pantalla y se repite horizontal y verticalmente. También puede agregar más de una imagen en el fondo del elemento HTML; Además, establezca el ancho y la altura de la imagen según sus preferencias. Sin embargo, también puede detener la repetición de la imagen.

Este artículo proporcionará los siguientes resultados de aprendizaje:

• • propiedad de imagen de fondo
  • Cómo establecer una imagen de fondo

Propiedad CSS de "imagen de fondo"

El "imagen de fondoLa propiedad se utiliza para aplicar una imagen en el fondo de una etiqueta especificada.

Sintaxis

Aquí está la sintaxis para establecer una imagen de fondo en un elemento HTML:

IMAGEN DE BUENGE: Imagen url ();

Aquí, la imagen url () tiene el nombre de la imagen o la ruta de la carpeta de imagen en la que existe.

Intentemos un ejemplo para tener una mejor comprensión.

Ejemplo: cómo establecer una imagen de fondo usando CSS?

En este ejemplo, primero, crearemos dos elementos más (

y

etiquetas), detrás de la cual se agregará la imagen de fondo. Puede agregar elementos de acuerdo con su elección y aplicarle una propiedad de imagen de fondo:

Establecer imagen de fondo

Para establecer la imagen de fondo, use la propiedad de imagen de fondo CSS

Puede agregar elementos de acuerdo con su elección y aplicarle una propiedad de imagen de fondo.

Muévase al CSS y asigne el nombre de la imagen en "imagen de fondo"URL:

cuerpo
IMAGEN DE ACTUALO: URL ("IMG.jpg ");

Una vez que haya completado todos los pasos, ejecute el archivo HTML, obtendrá el siguiente resultado:

Aquí puedes ver que la imagen de fondo se repite. Para evitar esto, use el "repetición"Propiedad y establecer su valor en"sin repetición":

cuerpo
IMAGEN DE ACTUALO: URL ("IMG.jpg ");
Background-Repeat: sin repetición;

Una vez que esté hecho, ejecute el código y consulte su página web:

Ahora, tiene un aspecto limpio y elegante de la imagen de fondo establecida en la etiqueta.

Buenas prácticas para establecer imágenes de fondo

• • Seleccione una imagen para que coincida con el color de su texto.
  • Use combinaciones de colores atractivas.
  • Si su imagen de fondo y color de texto no coinciden entre sí, su página web está mal diseñada.

Conclusión

Para agregar una imagen de fondo en CSS, use el "imagen de fondoPropiedad y dar la URL de la imagen en la función URL () de CSS. También puede evitar que su imagen se repita utilizando el "repetición"Propiedad y establecer su valor en"ninguno". Este artículo explicó el procedimiento para agregar una imagen al fondo utilizando el "imagen de fondo" y "repetición" propiedades.