Background image over another divs and text - html

Question

I've got to shape background, left top and right top shapes. I need to hold the original size of shapes, but the shapes layer over another div. The image moved over the top banner and navigation. How to hold backfround image size, and don't overlay onother div. Should I make all other div relative with 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

Though i am unable to produce the issue with the code and css you shared. But here are a few pointers if they help find a solution. As your using position absolute so you need to control the positioning by using the left, right, top and bottom properties to make sure the image divs dont overlay over other relative positioned divs. Second have you tried using background-size: cover; or background-size:contain; within the .shape-left--topand .shape-right--top classes? (Note: you will still need to position the image divs as they are absolute after applying background-size property according to your need)