Background image is not loading up

Question

I have been creating a website for my project using nodejs. I'm using expressjs and have choosen pug to be my template engine of my choice. I created the home page using pure pug, and tried adding the background image to a specific section of my website. However, no matter what I do, the developer tools simply say that it can't find the image(statuscode = 404), even when the image path seems to be exactly correct to me. can anyone please help me out???

Here is my file structure as viewed in vs code. File structure

Here is dance.js:

const express = require("express");
const path = require("path");

const app = express();

app.use("/static", express.static("static"));
app.use(express.urlencoded());
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "render"));

app.get("/", (req,res)=>{
    res.status(200).render("dance");
});

const port = 80;
const hostname = "127.0.0.1"
app.listen(port, hostname, ()=>{
    console.log(`Application is accessible on http://${hostname}:${port}`);
});

Here is dance.pug:

doctype html
html
    head
        title My dance academy 
        style 
            include ../static/style.css
    body
        div.navbar 
            ul#navigation
                li #[a(href="/") Home]
                li #[a(href="/") Services]
                li #[a(href="/") Our courses]
                li #[a(href="/") Contact us]
                li #[a(href="/") About us]
        div#sectionForimage
            h1 Express your emotions through your moves
            h3 
        div#section2
            p There
        div#section3
            p Our Footer

Here is style.css:

@import url('https://fonts.googleapis.com/css2?family=Combo&display=swap');/*font-family: 'Combo', cursive;*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.navbar ul li a{
    text-decoration: none;
    color: white;
}

.navbar ul li a:hover{
    font-weight: bold;
    /* font-style: italic; */
    color:rgb(0, 216, 249);
}

.navbar ul li{
    list-style-type: none;
    padding: 1rem;
    font-size: 1.7rem;
    font-family: 'Combo', cursive;
    margin:10px;
}

#navigation{
    display: flex;
    justify-content: center;
    background-color: tomato;
}

#sectionForimage{
    /* position: absolute; */
    height: 50vh;
    background-image: url("img.jpg");
}

#section2{
    height:50vh;
    background-color: yellow;
}

#section3{
    height:50vh;
    background-color: red;
}

I hope someone can help me out. Thanks in advance.

Answer 1

Use root path in style.css like this:

#sectionForimage{
    /* position: absolute; */
    height: 50vh;
    background-image: url(/static/img.jpg);
}

Note that I did not use quotes or double quotes as they are not needed(unless you have special characters as in W3 )