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

Question

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

None of the answers you'll receive will help you here since what you need to understand that this is exactly how things should behave... I am talking about the speed issue.. the picture not working is because you entered the wrong path... regarding to speed... Read the 1st answer here: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image -- basically if you want things to load together you need to use IMG tag but this will only help in making the content appear at the same time which could be even worse! - how big is your image? — Shlomtzion, Nov 22 '21 at 18:05
@Shlomtzion: The original image is about 3MB, the compressed one has 1.3 MB. I really wonder how it is done in industry then. The netflix login page for example shows a background image that covers the entire screen and I am not waiting for the background image to load. — Luk, Nov 22 '21 at 20:44
Just for reference the netflix image you are talking about is something like this? https://assets.nflxext.com/ffe/siteui/vlv3/03fdc4bf-72f6-4926-83a7-a76e6a1a5591/0930b767-db00-4209-ba03-2a8bda522747/IL-en-20211115-popsignuptwoweeks-perspective_alpha_website_large.jpg this is a full screen 344kbs jpg... perhaps you are not compressing correctly ... how about using the save for web feature?! :) — Shlomtzion, Nov 22 '21 at 21:09

score 0 · Answer 1 · answered Nov 22 '21 at 17:29

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.

Rob Moll · Answer 2 · 2021-11-22T17:59:42.447

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.

score 0 · Answer 3 · edited Dec 17 '21 at 06:14

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 ./ in front 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

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

3 Answers3