在背景图像上应用图像

Question

我的 CSS 代码似乎有问题。我想在页面width 和height 的100% 有一个背景图像，然后战略性地将其他图像放置在背景图像的顶部。我遇到的问题是，当我绝对将图像放在顶部时，除非我指定背景图像的实际高度，否则实际图像不会显示在背景中。任何人都可以建议一种方法来实际指定背景图像的高度吗？

#map {
  background-image: url("images/middleearth_map.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#registermap {
  position: absolute;
  top: 5%;
  right: 2%;
}

#gollum {
  position: absolute;
  top: 40%;
  right: 15%;
}

#playtrailer {
  position: absolute;
  top: 30%;
  left: 0%;
}

<div id="map">
  <div id="registermap">
    <a href="register.html">
      <img src="images/middle-earth_map1.png" alt="Registration Link" class="wobble" />
    </a>
  </div>

  <div id="gollum">
    <a href="cast.html">
      <img src="images/gollum.png" alt="Cast and Crew Link" class="wobble" />
    </a>
  </div>

  <div id="playtrailer">
    <a href="trailer.html">
      <img src="images/play_button.png" alt="Movie Trailer Link" class="wobble" />
    </a>
  </div>
</div>

Answer 1

您可以将background-image 设置为body 以确保它占据所有窗口。

body {
  background-image: url("https://i.stack.imgur.com/6JzYG.jpg");
  background-size: 100% 100%; /* Picture stretches */
  min-height: 100vh; /* Body occupies at least all screen */
  margin: 0;
}

Answer 2

map id 的 div 没有填满所有窗口大小，请将 css 更改为：

#map {
  background-image: url("images/middleearth_map.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  margin:0;
  padding:0;
}