La imagen de fondo HTML- CSS no se muestra

CSS ofrece muchas propiedades de estilo para elementos HTML. Más específicamente, agregar imágenes de fondo usando CSS es una de las tareas de diseño importantes. Sin embargo, trabajar con imágenes de fondo puede ser un desafío a veces. Esto se debe a que varios otros factores pueden evitar que la imagen de fondo se muestre.

Esta publicación cubrirá lo siguiente:

• Cómo establecer la URL de la imagen correctamente?
• Cómo establecer el tamaño del elemento principal de la imagen?
• Cómo vincular el archivo CSS correctamente?
• Cómo establecer CSS "fondo" propiedades?

Cómo establecer la URL de la imagen correctamente?

La imagen de fondo no se carga en el navegador si la URL de la imagen es incorrecta. Analice el ejemplo que se discute a continuación para conocer el problema con la solución relevante.

Ejemplo

En HTML, agregue un ""Elemento y asignarlo la clase"banner-img":

Clase de estilo "Banner-IMG"

.banner-img
Ancho: 400px;
Altura: 300px;
IMAGE DE ACTURRIO: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
tamaño de fondo: cubierta;

Según el fragmento de código dado:

• "ancho"Determina la amplitud del elemento.
• "altura"Ajusta la altura del elemento.
• "imagen de fondo"Especifica la URL de la imagen.
• "tamaño de fondo"Con el valor"cubrir"Se ajusta a la imagen en todo el contenedor.

Producción

Si agrega la URL de la imagen incorrecta como se menciona en el siguiente bloque de código, se producirá el error 404:

.banner-img
Ancho: 400px;
Altura: 300px;
IMAGE DE ACTUESS: URL (/IMG/BULBS-5488573_1920.jpg);
tamaño de fondo: cubierta;

Haga clic derecho en la página web y seleccione el "inspeccionar"Opción, la ventana de herramientas del desarrollador mostrará el estado del recurso:

Cómo establecer el tamaño del elemento principal de la imagen?

A veces, la imagen no se carga en la página web si no se establece el tamaño de su elemento principal.

Analice el ejemplo a continuación.

Ejemplo

Agrega un ""Elemento y asignarlo la clase"bandera":

.contenido
IMAGE DE ACTURRIO: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
tamaño de fondo: cubierta;
Ancho: 400px;
Altura: 500px;

Aquí:

• "imagen de fondo"Establece la URL de la imagen de fondo.
• "tamaño de fondo"Establece el tamaño de la imagen. Más específicamente, el "cubrir"El valor cubre todo el contenedor.

Producción

Cómo vincular correctamente un archivo CSS?

Si usa la hoja de estilo externo, asegúrese de que el "El elemento debe especificarse correctamente. El nombre del archivo debe especificarse correctamente en el "href" atributo:

Cómo establecer propiedades de "fondo" de CSS?

El CSS "fondo"Las propiedades deben especificarse correctamente a los elementos:

.banner-img
margen: auto;
Ancho: 400px;
Altura: 250px;
IMAGE DE ACTURRIO: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
tamaño de fondo: cubierta;
Posición de fondo: centro;
Background-Repeat: sin repetición;

Aquí:

• "imagen de fondo"Especifica la URL de la imagen de fondo.
• "tamaño de fondo"Establece el tamaño de la imagen de fondo.
• "posición de fondo"Ajusta la posición de la imagen de fondo.
• "repetición"Determina si la imagen se repite o no.

El CSS "fondo"La propiedad se puede especificar como una propiedad de taquigrafía como esta:

Antecedentes: URL (/IMG/Light-Bulbs-5488573_1920.jpg) centro/cubierta sin repetición;

Nota: La posición de fondo y el tamaño de fondo deben estar separados por el "/"Slash como se menciona en el bloque de código anterior. De lo contrario, no mostrará la imagen.

Para verificar, inspeccionar la página y observar la ventana de la herramienta del desarrollador, verá lo siguiente:

Estas son las razones y soluciones para la imagen de fondo de CSS que no muestran problemas.

Conclusión

Para cargar la imagen de fondo correctamente, se deben considerar muchos factores. Estos incluyen configurar la URL de la imagen correctamente, ajustar el ancho y la altura del elemento principal, incluir correctamente el enlace de la hoja de estilo externo y especificar el CSS "fondo"Propiedades correctamente. Esta publicación ha explicado las correcciones para las imágenes de fondo que no muestran problemas.