How to show a background image loaded in CSS at the same time as the rest of the CSS-CodePudding

I have created a small spring-boot application, which does nothing but implement a login-form.

When I open my browser on http://localhost:8080/login while running my application, a login.html page is loaded, which references a css file as follows:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login Form</title>
    <link href="css/login.css"  rel="stylesheet">
</head>

The css form is loading an image as background:

body {
    background: url("../imgs/backgroundImage.jpg");
    background-size: cover;
}

All of this works fine. The background image, however, is loading a bit slow, slower than the login-form does. And this is unpleasant, which is why I want to change it. Since I cannot compress my image any further, I figured, maybe loading the image inside my html file would be a bit faster than referencing the external stylesheet. That's why I deleted the background-part from my external css file and included the following style-tag in the head of my login.html:

<style>
    body {
            background: url("static/imgs/backgroundImage.jpg");
            background-size: cover;
    }
</style>

And now the background image does not load at all. I don't understand why the image wouldn't show at all and I was hoping someone here could explain.

The resources are located in the following way:

resources
    static
        css
            login.css
        imgs
            backgroundImage.jpg
    templates
        login.html

CodePudding user response：

Where do you put your style tags ? Before or after the link of your css file ? Check that you put it after your css link if you use a background propery for you body or it will be overide. Or use "background-image".

In fact, it will not be faster or not noticeable. When your css file and pictures are loaded for the first time. It's cached in your browser.

CodePudding user response：

make sure if the <style> tag is inside the <head> tags.
make sure your image url is right and if it's right, try it like this. (adding ./ infront of the url).

background: url("./static/imgs/backgroundImage.jpg");

It should work but if you still have issues,

move the image in the same folder as html file and change the url to this.

background: url("backgroundImage.jpg");
try changing the image just to make sure

with provided code pieces can't point out the exact problem but these might help you for find it.

CodePudding user response：

url("static/imgs/backgroundImage.jpg") means the "backgroundImage.jpg" file is located in the 'static' folder then the 'imgs' folder - in the current folder or url("/templates/static/imgs/backgroundImage.jpg"). That's not where the background image is. In fact that path is invalid and I believe should throw a 404 error in the console.

The correct path is url("/static/imgs/backgroundImage.jpg") the leading / moves you up to the document root folder. Then the rest of the path is relative to the root.

This assumes that the 'resources' folder in the hierarchy you show in your question is the document root.