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:高度 250px

分区 2:高度 250px

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

附注。两个div是 block

Answer 1

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