De manera predeterminada, en una página web, aparece una imagen en la esquina superior izquierda de la pantalla y se repite horizontal y verticalmente. Sin embargo, para cambiar su posición actual, CSS ofrece un "posición de fondo"Propiedad que especifica la posición de la imagen de fondo, como el centro.

En este artículo, aprenderemos cómo establecer la posición de una imagen de fondo con la ayuda de ejemplos. Para hacerlo, en primer lugar, demostraremos el procedimiento de agregar una imagen como fondo en CSS.

Agregue imágenes de fondo utilizando la propiedad de "imagen de fondo"

Para agregar imágenes en el fondo, el "imagen de fondoSe utiliza la propiedad.

Sintaxis

La siguiente es la sintaxis para establecer una imagen de fondo en un elemento HTML:

IMAGEN DE ACTUESS: URL ();

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

Ahora, pase al ejemplo práctico de usar la propiedad de imagen de fondo.

Ejemplo: insertar una imagen de fondo usando CSS

En este ejemplo, crearemos un

elemento, y el fondo se agregará detrás de este elemento. Puede agregar elementos de acuerdo con su elección y aplicarle la propiedad de imagen de fondo:

Linuxhint

Después de eso, muévase al CSS, use el "imagen de fondo"Propiedad, asigne la ruta o nombre de la imagen en el AS"url ()"Valor de la propiedad de imagen de fondo:

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

Esto dará el siguiente resultado:

Así es como puede agregar una imagen de fondo en CSS.

Cómo centrar las imágenes de fondo utilizando la propiedad CSS de "posición de fondo"?

El "posición de fondo"La propiedad establece la posición de la imagen de fondo. La sintaxis será la siguiente:

Posición de fondo: valor

La posición de la imagen se puede especificar como absoluta, izquierda o derecha. Más específicamente, establecer el "centro"El valor se centrará en la imagen de fondo agregada.

Ahora, pasemos al ejemplo práctico que demuestre cómo usar la imagen de fondo y las propiedades de la posición de fondo en CSS.

Ejemplo: cómo configurar la imagen de fondo en el centro?

Estableceremos el color de fondo y la ruta de imagen con el "fondo" propiedad. A continuación, utilizaremos el "posición de fondoPropiedad para establecer la imagen de fondo en el centro. Finalmente, estableceremos el "repetición"Propiedad para no repetir para no repetir la imagen:

cuerpo
Antecedentes: RGB (128, 44, 12) URL ("Imagen.jpg ") fijo;
Posición de fondo: centro;
Background-Repeat: sin repetición;

Una vez que todo esté hecho, ejecute el código y echemos un vistazo al resultado final:

Nuestra imagen de fondo se posiciona correctamente en el centro de la página.

Conclusión

Las imágenes de fondo se pueden agregar utilizando la propiedad de imagen de fondo, mientras que la posición de fondo se puede establecer utilizando la propiedad de posición de fondo. Al centro, la imagen de fondo en CSS establece el valor de la propiedad de posición de fondo en "centro". El artículo explica en detalle cómo agregar una imagen al fondo usando "imagen de fondo"Y cómo establecer su posición usando el"posición de fondo" propiedad.