もう1つのdivsとtextの上の背景イメージ

Question

私はバックグラウンド、左上と右上のシェイプを形にする必要があります。元のサイズの図形を保持する必要がありますが、図形は別のdivに重ねて表示されます。画像が上部のバナーとナビゲーションに移動しました。 backfroundイメージサイズを保持する方法と、他のdivにオーバーレイしない方法。他のすべてのdivをz -indexと相対的にする必要があります。

<div class="nav">NAV SECTION</div> 
    <div class="top-banner">TOP BANNER SECTION</div> 
    <div class="wrapper"> 
     <div class="container"> 
     some content here/grid and on.... 
     <div class="shape-left shape-left--top"></div> 
     <div class="shape-right shape-right--top"></div> 
    </div> 

    .shape-right, .shape-left { 
    height: 100%; 
    width: rem-calc(500); 
    max-width: rem-calc(500); 
    pointer-events: none; 
    } 

    /*========================================================= 
    01. #SHAPE PLACEMENT LEFT 
    =========================================================*/ 
    .shape-left--bottom { 
    position: absolute; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    background-repeat: no-repeat; 
    background-position: 0 -28%; 
    } 

    .shape-left--top { 
     position: absolute; 
     right: 0; 
     left: 0; 
     top: -40%; 
     background-image: url(https://s12.postimg.org/p508mxwwd/shape_left_top.png); 
     background-repeat: no-repeat; 
    } 

    /*========================================================= 
    02. #SHAPE PLACEMENT RIGHT 
    =========================================================*/ 
    .shape-right--bottom { 
     position: absolute; 
     right: 0; 
     left: 0; 
     bottom: 0; 
     background-position: 0 -28%; 
     } 

    .shape-right--top { 
     position: absolute; 
     right: -5%; 
     left: inherit; 
     top: -40%; 
     background-image: url(https://s18.postimg.org/v31a5sthl/shape_right_top.png); 
     background-repeat: no-repeat; 
    } 

Answer 1

私はあなたが共有コードとCSSの問題を生成することができませんけど。しかし、彼らが解決策を見つけるのを助けるならば、ここにいくつかの指針があります。あなたのポジションを絶対的に使用する場合は、左、右、上、下のプロパティを使用して位置を制御して、イメージdivが他の相対配置されたdivにオーバーレイしないようにする必要があります。 2番目に.shape-left--topと.shape-right--topクラス内でbackground-size: cover;またはbackground-size:contain;を試してみましたか？ （注：必要に応じて背景サイズのプロパティを適用した後、イメージdivを絶対配置する必要があります）