2017-01-31 8 views
0

画像が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; 

    } 
    } 
+0

私は似たような質問があると思います。http://stackoverflow.com/questions/16363029/responsive-images-positioned-over-image – Girisha

+0

私はすでにそれをチェックしていますそのようには機能しません。ありがとう – mukhilsaravanan

+0

ブートストラップを使用していますか? – Girisha

答えて

0

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

@include media($small-screen) { 

}

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

関連する問題