背景画像のサイズ可変にして、h1,pを下に隠す

これいいよ！

html部分

<section id="main-visual2">
                <!-- h1追記-->
                <h1>選ばれる理由はこの３つ</h1>
                <p class="text1">大阪結婚相談所ヴィーノには選ばれる理由があります。
                    会員数述べ67216名（関西21587名）　
                    お見合い率99.1％（3ヶ月以内）
                    交際率91.5％（三ヶ月以内） 
                </p>
</section>

css

#main-visual2 {
    /**
     *     子要素をposition:absolute指定するためのrelative指定
     */
    position: relative;
    /**
     *     背景画像のはみ出した部分を表示させない
     */
    overflow: hidden;
}
#main-visual2::after {
    /**
     *   枠の縦横比を固定する設定
     */
    content: "";
    padding-top: 22.5%;/*対象の画像サイズが640*144ピクセルなので縦横比が22.5%になる*/
    display: block;
    /**
     *     背景画像の指定
     */
    background-image: url(images/main-visual2.gif);
    /**
     *     背景画像を横を基準として伸縮させる設定
     */
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    /**
     *     画像の配置をborderまでにする
     */
    background-clip: border-box;
    /**
     *     この要素を一番上にする
     */
    z-index: 10;
}

#main-visual2 > h1 {
    /**
     *     配置を一番上にセットして、下に隠す
     */
    margin: 0px;
    position: absolute;
    z-index: -1;
    top: 0px;
    font-size: 1px;
}
#main-visual2 > p {
    /**
     *     配置を一番上にセットして、下に隠す
     */
    margin:0px;
    position: absolute;
    z-index: -1;
    top: 0px;
    font-size: 1px;
}