Repsonsive divs与背景/文本

Question

因此，我需要设置多个div，一个在另一个下面，同时具有响应背景图像和顶部文本。现在我有以下设置：

http://secretsofpoolecreekvillage.com/index_temp.php

..当只有一个div“.bg1”时工作正常。一旦我在它下面添加另一个div，它们就会重叠。我假设这与位置有关：绝对;在每个这些div上。不过，我不知道怎么做到这一点。

.bg1 {
    width: 100%;
    height:auto;
    text-align: center;
    position: absolute;
}

.bg1 img {
    width:100%;
    height:auto;
}

.bg1 h1 {
    color: #FFFFFF;
    font-family:'ITCFranklinGothicStd-Book';
    font-size: 34px;
    margin-bottom: 5px;
    line-height: 40px;
    font-weight: normal;
}

.bg1 h2 {
    color: #FFFFFF;
    font-family:'TimesEuropaLTStd-Bold';
    font-size: 62px;
    margin-top: 0;
    line-height: 50px;

}

.bgContent1 {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    transform: translate(-50%, -50%);
 }

<div class="bg1">
<img src="/images/bg_1.jpg">
<div class="bgContent1">
    <h1>SECRETS OF</h1>
    <h2>POOLE CREEK VILLAGE</h2>
</div>