фоновое изображение не отображается на странице html

Question

Я новичок в html и пытаюсь использовать изображение в качестве полного фона для моей страницы. Я хочу, чтобы изображение соответствовало моему сценарию, чтобы мне не приходилось прокручивать вниз, чтобы увидеть остальную часть изображения. Я пробовал это, но изображение даже не загружается с самого начала.

.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>

Моя структура папок похожа на:

PROJECT 
  HTML_FILES
      mypage.html
      IMAGES 
          map.jpg

Я был бы признателен за вашу помощь, направленную на загрузку изображения и его правильную настройку. Заранее спасибо.

Answer 1

Используйте для этого стиль ниже.

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

Answer 2

.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>