Background-image in CSS not working in Phoenix 1.6

Questions & Help Questions
, , ,
9

This is getting insane.

I have just tried to create completely new installation of Phoenix 1.6 and it still doesn’t work.

Exactly what I did:

I went to my root of my home folder in Kubuntu 20.04 to eliminate the possible too-nested directories problem.

I run:

mix phx.new my_blog --live

Confirmed fetch and install dependencies question.

Then:
cd my_blog

and
mix ecto.create

and the DB was successfully created.

Then I run:

mix phx.server

and I now can successfully see the website on localhost:4000

So far, as expected. No problems.

Now, I went into this directory:

assets/css/

and opened this file:

phoenix.css

In this file I changed this:

header {
  width: 100%;
  background: #fdfdfd;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2rem;
}

into this:

header {
  width: 100%;
  background: #fdfdfd;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2rem;
  background-image: url("../images/phoenix.png");
}

and then I stopped the server via CTRL+C pressed twice and then
started it again:

mix phx.server
And I got no image shown on the website and this error in the terminal console:

[info] Running MyBlogWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access MyBlogWeb.Endpoint at http://localhost:4000
 > css/phoenix.css:629:24: error: Could not resolve "../images/phoenix.png"
    629 │   background-image: url("../images/phoenix.png");
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished, watching for changes...

At this point I don’t know what more to do.
Please, try to replicate these steps with the fresh Phoenix 1.6 install and let me know if you got the same result.
Thank you a lot in advance.