如何使背景图像适合移动设备上可见区域的大小？

body {
  background-image: url('your-image.jpg');
  background-size: cover; /* 或者 contain */
  background-position: center;
  background-repeat: no-repeat;
}

body {
  background-image: url('your-image.jpg');
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  background-image: url('your-image.jpg');
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  background-image: url('your-image-small.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  body {
    background-image: url('your-image-medium.jpg');
  }
}

@media (min-width: 1024px) {
  body {
    background-image: url('your-image-large.jpg');
  }
}

<div class="background-container"></div>

.background-container {
  width: 100%;
  height: 100vh; /* 视口高度 */
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}