Two div equally spaced form center above another div

I need to have two divs with images equally spaced from the center of the page, one on the left and another one on the right, above central div.

I have tried to make an example in the following picture:

the main page div (flowers) is 1024 pixel, and the two right/left blue divs need to stay in the same position... I am not that CSS expert ...how can I achieve this behaviour?

my CSS code so far:

.overlay-left{
background-color: transparent !important;
 background-image: url("/images/background-left.png");
 background-position: center top;
  background-repeat: no-repeat;
   height: 100vw;
position: absolute;
    width: 400px;
    //left: calc(-60vw + 50%);
    left: calc(-50% + 600px);
margin-left: -150px;
  z-index: 100;
}


.overlay-right{
background-color: transparent !important;
 background-image: url("/images/background-right.png");
 background-position: center top;
  background-repeat: no-repeat;
   height: 100vw;
position: absolute;
    width: 400px;
    //left: calc(+130vw - 50%);
    left: 1024px;
margin-left: 100px;
  z-index: 100;
}