Hintergrundbild über ein anderes divs und Text

Question

Ich habe Hintergrund, links oben und rechts oben Formen zu gestalten. Ich muss die ursprüngliche Größe von Formen halten, aber die Formen über einem anderen div. Das Bild wurde über das obere Banner und die Navigation bewegt. So halten Sie die Hintergrundbildgröße fest und überlagern sich nicht auf anderen Div. Soll ich alle anderen div relativ mit z-index machen.

<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

Obwohl ich bin nicht in der Lage, das Problem mit dem Code und CSS Sie geteilt zu produzieren. Aber hier sind ein paar Hinweise, wenn sie helfen, eine Lösung zu finden. Da Ihre Verwendungsposition absolut ist, müssen Sie die Positionierung mithilfe der linken, rechten, oberen und unteren Eigenschaften steuern, um sicherzustellen, dass die Bild-Divs nicht über anderen relativ positionierten Divs liegen. Zweitens haben Sie versucht, background-size: cover; oder background-size:contain; innerhalb der Klassen .shape-left--top und .shape-right--top zu verwenden? (Hinweis: Sie müssen die Bild-Divs immer noch so positionieren, wie sie absolut sind, nachdem Sie die Hintergrund-Größe entsprechend Ihren Anforderungen angewendet haben)