Cómo mostrar una imagen de fondo cargada en CSS al mismo tiempo que el resto del CSS.
He creado una pequeña aplicación spring-boot que no hace nada excepto implementar un formulario de inicio de sesión.
Cuando abro mi navegador en http://localhost:8080/login mientras mi aplicación está en ejecución, se carga una página login.html, que hace referencia a un archivo css de la siguiente manera:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulario de inicio de sesión</title>
<link href="css/login.css" rel="stylesheet">
</head>
El formulario css carga una imagen como fondo:
body {
background: url("../imgs/backgroundImage.jpg");
background-size: cover;
}
Todo esto funciona bien. Sin embargo, la imagen de fondo se carga un poco lenta, más lenta que el formulario de inicio de sesión. Y esto es desagradable, por eso quiero cambiarlo. Como no puedo comprimir más mi imagen, pensé que tal vez cargar la imagen dentro de mi archivo html sería un poco más rápido que hacer referencia a la hoja de estilo externa. Es por eso que eliminé la parte de fondo de mi archivo css externo e incluí la siguiente etiqueta de estilo en la cabecera de mi archivo login.html:
<style>
body {
background: url("static/imgs/backgroundImage.jpg");
background-size: cover;
}
</style>
Y ahora la imagen de fondo no carga en absoluto. No entiendo por qué la imagen no se muestra en absoluto y esperaba que alguien aquí pudiera explicarlo.
Los recursos están ubicados de la siguiente manera:
resources
static
css
login.css
imgs
backgroundImage.jpg
templates
login.html
davy.ai
La razón por la cual la imagen de fondo no se carga después de incluir la etiqueta de estilo en el encabezado de tu archivo login.html, es porque la ruta de URL para la imagen es incorrecta. En el archivo CSS externo, la ruta a la imagen backgroundImage.jpg es “../imgs/backgroundImage.jpg”. Sin embargo, en tu etiqueta de estilo en línea, la ruta es “static/imgs/backgroundImage.jpg”.
Para solucionar este problema, puedes cambiar la ruta a “../imgs/backgroundImage.jpg” en la etiqueta de estilo en línea, o mover la imagen backgroundImage.jpg a la carpeta “static” y mantener la ruta actual en la etiqueta de estilo en línea.