background-image is not loading even though the path is 100% correct – Html

as a div background I want to load an image, in the css file for the backgroud-image property I give the path to the image, which is correct, but the image does not load,
but when somewhere, any place in html file, I use that code line

<img src="/static/images/map.png" class="map_photo" alt="map_photo">

then the background image for my div pops up and additionall, there is a picture loaded by this line of code above, it seems to me that this image is not pre-loaded, or something like that, so maybe i should add in my css file some code to allow load images to html

I’m useing the newest Intellij Ultimate, and I included all the necessary attachments below.

div into which I want to load the graphic is class map

  <section id="map_section">
    <div id="map"></div> <-- This DIV
    <div id="events"></div>
  </section>

My CSS code block

#map_section
{
    height: 600px;
    width: 600px;
}
#map {
    height: 600px;
    width: 600px;
    background-image: url(./images/map.png);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

And the image with project structure is added as a attachment project structure

Thx for Help!

Fast edit to make it clear
when my html code look like this:

  <img src="/static/images/map.png" class="map_photo" alt="map_photo">
  <section id="map_section">
    <div id="map"></div>
    <div id="events"></div>
  </section>

i have situation like this: result

when I delete or comment that one line

<!--  <img src="/static/images/map.png" class="map_photo" alt="map_photo">-->
  <section id="map_section">
    <div id="map"></div>
    <div id="events"></div>
  </section>

both images disappear: result