応答画像は別の画像に配置されています

Question

画像が2つあります。相対位置を持つ1つのイメージ（background-urlを介して）がメインイメージであり、絶対位置の別のイメージ（background-urlを介して）が最初のイメージの上に配置されます。

ブラウザを縮小すると、2番目の画像は応答性に従わなくなります。やるべきことはありますか？

ありがとうございます！

// 1st image// 

    &main-background { 
    z-index: -1; 
    position: absolute; 
    width: 100%; 
    height: 500px; 
    background-image: url("images/campaign/1-bg.jpg"); 
    } 

// 2nd image// 

&__main-bg { 
    position: relative; 
    width: 100%; 
    height: 550px; 
    background-color: black; 
    margin-bottom: 2em; 
    color: $blue-2017; 
    background-image: url("images/campaign/main-1.jpg"); 
    box-shadow: 0 10px 6px -6px #777; 

    @include media($small-screen) { 
     font-size: 0.8em; 

    } 
    } 

Answer 1

$ small-screenのこの変数の値は何ですか？ 私たちの必要性はありますか？

@include media($small-screen) { 

}

これらの行を削除してみて、それが動作するかどうかを確認。そうでない場合。
画像2の割合を減らして、Cssの各行の最後に無差別のCss​​（！important）を使用して、2番目の画像を作成してみてください。私はかなりあなたの2番目のイメージを上書きするいくつかのCSSがあることを確信しています