html – background-image isn’t loading although the trail is 100% appropriate

as a div background I need to load a picture, within the css file for the backgroud-image property I give the trail to the picture, which is appropriate, however the picture doesn’t load,
however when someplace, anywhere in html file, I take advantage of that code line

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

then the background picture for my div pops up and additionall, there’s a image loaded by this line of code above, it appears to me that this picture isn’t pre-loaded, or one thing like that, so possibly i ought to add in my css file some code to permit load pictures to html

I am useing the most recent Intellij Final, and I included all the required attachments beneath.

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

  <part id="map_section">
    <div id="map"></div> <-- This DIV
    <div id="occasions"></div>
  </part>

My CSS code block

#map_section
{
    peak: 600px;
    width: 600px;
}
#map {
    peak: 600px;
    width: 600px;
    background-image: url(./pictures/map.png);
    background-position: heart; /* Middle the picture */
    background-repeat: no-repeat; /* Don't repeat the picture */
    background-size: cowl; /* Resize the background picture to cowl your entire container */
}

And the picture with challenge construction is added as a attachment challenge construction

Thx for Assist!

I attempted giving each attainable path in my css file