background image not showing up in html page

Question

I'm a beginner in html and I am trying to use an image as a complete background to my page. I want the image to fit my sceen so that I do not have to scroll down to see the rest of the image. I have tried this but the image doesn't even load to begin with.

 .html, .body{ margin:0; height:100%; } #map{ background: url("HTML_FILES/IMAGES/map.jpg"); height:100%; width:100%; background-position: center; background-repeat: no-repeat; background-size: cover; }

 <div id = "map"></div>

My folder structure is like:

PROJECT 
  HTML_FILES
      mypage.html
      IMAGES 
          map.jpg

I would appreciate your help with guiding me to load the image and adjust it correctly. Thank you in advance.

Answer 1

 .html, .body{ margin:0; height:100%; } #map{ background-image: url(https://images.unsplash.com/photo-1495567720989-cebdbdd97913?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80); height:100%; width:100%; background-position: center; background-repeat: no-repeat; background-size: cover; position:absolute; top:0; bottom:0; }

 <div id = "map"></div>

Answer 2

Use the below style to get it done.

body {
    background: url(HTML_FILES/IMAGES/map.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}