Imagen de fondo en CSS
En CSS, el imagen de fondo La propiedad se utiliza para establecer la imagen de fondo para elementos individuales o múltiples. En CSS, se pueden usar múltiples propiedades para establecer la imagen de fondo. Algunas propiedades de uso común se indican a continuación:
- tamaño de fondo La propiedad se utiliza para ajustar el tamaño de la imagen de fondo.
- repetición La propiedad habilita o deshabilita la repetición de una imagen.
- Posición de fondo Especifica la posición de una imagen.
Este artículo presentará una descripción completa de la propiedad de imagen de fondo, donde aprenderá cómo agregar una imagen de fondo a un solo elemento o cuerpo entero.
Cómo agregar una sola imagen de fondo en CSS
La propiedad de imagen de fondo se usa principalmente con el elemento del cuerpo, sin embargo, se puede agregar a cualquier elemento específico, como párrafos, encabezados, div, etc. Para agregar la imagen de fondo.
Ejemplo 1: La pieza de código a continuación incrustará una imagen de fondo en todo el cuerpo:
Imagen de fondo
Bienvenido a Linuxhint.comunicarse
Mostrará la siguiente salida:
En el ejemplo de ejemplo anterior se colocó en la misma carpeta con archivo html, en el Url Solo toma el nombre de la imagen con su extensión como se muestra en el siguiente fragmento:
Ahora mueva la imagen a alguna otra carpeta "Imágenes":
Si la imagen no está allí en el mismo directorio de lo que tenemos que especificar la ruta completa de la imagen, de lo contrario no obtendríamos los resultados deseados.
Ejemplo 2: En lugar de proporcionar la ruta completa, este ejemplo intentará acceder a la imagen solo con su nombre:
Imagen de fondo
Bienvenido a Linuxhint.comunicarse
La imagen se coloca en las imágenes. Desde la salida sería claro que si no especificó la ruta exacta, no obtendría los resultados deseados como se muestra a continuación:
Ejemplo 2: Consideremos un ejemplo en el que la imagen está presente en la carpeta de imágenes mientras el archivo HTML está allí en la carpeta de imagen de fondo. En tal caso, especificamos la ruta completa de la imagen como se muestra en el siguiente fragmento:
Imagen de fondo
Bienvenido a Linuxhint.comunicarse
En la URL primero viene dos puntos "..." que los estados retroceden un directorio y luego vaya al "Imágenes" Directorio donde se coloca la imagen y al final el nombre de la imagen vendrá con su extensión como JGEG, PNG, etc. Ahora este programa generará la salida adecuada con la imagen de fondo como se muestra a continuación:
Del mismo modo, la imagen de fondo se puede integrar con cualquier elemento como
,
, etc.
Cómo agregar múltiples imágenes de fondo en CSS
En CSS, se pueden agregar múltiples imágenes de fondo al mismo elemento proporcionando múltiples URL.
Ejemplo
El código dado a continuación agregará varias imágenes en el elemento del cuerpo, además utilizará algunas propiedades más como repetición de fondo, tamaño de fondo, etc. Como se muestra abajo:
Imagen de fondo
Bienvenido a Linuxhint.comunicarse
El código anterior utiliza
- Propiedad de color para configurar el color dorado para el texto,
- La imagen de fondo agregó dos imágenes,
- tamaño de fondo establece el tamaño de la imagen en 600px,
- Posición de fondo para alinear la posición de la imagen al centro,
- y finalmente la repetición de fondo toma "sin repetición", lo que significa que cada imagen se mostrará solo una vez.
Como resultado, generará la siguiente salida:
Desde la salida, puede ver claramente que el azul.La imagen JPG está detrás del Linuxhint.Imagen JPEG, que significa que la URL que escribe primero aparecerá en la parte superior, mientras que la segunda imagen se mostrará en la parte posterior/detrás.
Conclusión
imagen de fondo La propiedad establece la imagen de fondo para elementos individuales o múltiples. Para implementar una imagen de fondo, simplemente especifique la URL de la imagen en la propiedad de imagen de fondo.
Este artículo presentó una descripción detallada de la propiedad de imagen de fondo. Inicialmente, explica cómo agregar una sola imagen de fondo en CSS. Después, este artículo guió cómo configurar más de una imagen de fondo para un elemento.