Фоновое изображение над другим divs и текстом

Question

Мне нужно сформировать фон, левый верхний и правый верхние фигуры. Мне нужно сохранить оригинальный размер фигур, но слой фигур над другим div. Изображение перемещено над верхним баннером и навигацией. Как сохранить размер обратного изображения и не накладывать на другой 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. Во-вторых, вы пробовали использовать background-size: cover; или background-size:contain; в рамках классов .shape-left--top и .shape-right--top? (Примечание: вам по-прежнему нужно будет позиционировать разделители изображений, поскольку они являются абсолютными после применения свойства фона в соответствии с вашими потребностями)