html - 背景图片将填充 2 div

Question

body {
  padding: 0;
  background-image: url("https://cms-assets.tutsplus.com/uploads/users/107/posts/26488/final_image/41-space-scrolling-background850-2.jpg");
}
.container1 {
  background-color: blue;
  opacity: 0.5;
}
.container2 {
  background-color: blue;
  opacity: 0.5;
}

<div class="container1">
  <h1>Div no 1</h1>
</div>
<div class="container2">
  <h1>Div no 2</h1>
</div>

我有这 2 个 div 和一张背景图片

示例:

第 1 部分:高度 250 像素

第 2 部分:高度 250 像素

我的问题是背景图片的高度大于两个div的总和。有没有一种方法可以在不降低图像质量的情况下填充两个 div？

附言。两个div是 block

Answer 1

将两个 div 打包到另一个“包装器”div，将背景设置为此父级并在背景上设置 background-size: auto 500px;