背景圖像未顯示在 html 頁面中

Question

我是 html 的初學者，我正在嘗試使用圖像作為我頁面的完整背景。 我希望圖像適合我的場景，這樣我就不必向下滾動查看圖像的 rest。 我已經嘗試過了，但圖像甚至沒有加載開始。

 .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

 .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

使用下面的樣式來完成它。

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