Question 42889 in Html Question posted in
Some basic documentation can be found here.

CSS background-image not working with Spring Boot application – Html

I read so many posts about this issue but I just couldn’t solve it. I am trying to add a simple background image in my html page as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-image: url(../static/background.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
</body>
</html>

When I run the Spring application and went to localhost:8080/temp, I gotta see my html page which I set in my controller as get request but all I got is just a white blank page. The thing is, if I manually right click my temp.html file and open it in chrome, it works just fine, I can see my image. So I think there is a problem with spring boot or something?

Here’s my resources directory:

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For those who struggle with this, if you are using Spring Security dependency, give permission to your files like this:

    enter image description here

    Then put your image under the static/img folder like this:

    enter image description here

    Put the CSS into your CSS file:

    body {
    background-image: url(../img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

    Lastly, add CSS link to your HTML file:

    <link rel="stylesheet" th:href="@{/css/register.css}">

    Hope this helps to someone!


  2. 0

    Resources in resources/static are mapped to the root, /. Templates are also mapped to the root, /. That’s why the reference in the template should be background.jpg.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search