CSS两个以div格式堆叠的背景图像，100%宽50%高

我想展示两个具有不同背景图像的

div

s，如演示图像所示，它们叠在一起。如何使用CSS定位这些图像，使每个图像都是页面宽度的100%，只有页面高度的50%

到目前为止，我尝试过的每一种方法都会自动剪切出每幅图像的大部分，或者我一直在使用我不想做的固定尺寸（理想情况下，无论屏幕大小如何，这种方法都能很好地缩放）

尝试1:

.home_image_one {
    background: url("party3a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
}

.home_image_two {
    background: url("party2a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
  top:50%;
}

<section class="row home_images">
        <div class="home_image_one">
        </div>
        <div class="home_image_two">
        </div>
</section>

HTML:

.home_image_one {
    background: url("party3a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
}

.home_image_two {
    background: url("party2a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
  top:50%;
}

<section class="row home_images">
        <div class="home_image_one">
        </div>
        <div class="home_image_two">
        </div>
</section>

---

使用

位置：绝对：


如果你想让页面的内容在下面，把所有内容都放在一个div中，并给div
位置：reactive：

将标题设置为%并将图像背景分割为其余部分。它是背景：url（“图像”）而不是url图像

body{
  padding: 0;
  margin: 0;
}

header{
  height: 20%;
  font-size: 20px;
}
.home_image_one {
    background: url("party3a.jpg") no-repeat center center fixed; 
    display: inline-block;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:40%;
  width:100%;
}

.home_image_two {
    background: url("party2a.jpg") no-repeat center center fixed; 
    display: inline-block;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:40%;
  width:100%;
}

请提供您所尝试的html/css。只是想澄清一下，在页眉占用空间后，剩余高度的100%（50%+50%）是不是？因此，
100%-收割台高度
原样？用我当前的尝试@dwreck08编辑了这个问题。Jaunt-是的，100%减去收割台高度这很好，谢谢！我没有在外部图像容器上使用
position:absolute
，这就解决了它