Display Sunset Effect with Gradients Above Background Image in Body

I'm trying to create a gradient based sunset effect on my website's background.

Example Link (with sunset effect, in the background) https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/

Try to scroll down on the example link & you will notice the "sunset" effect.

This is what I've achieved so far: https://sirsakisan101.provenreviews.com/

I was able to display the two palm images, side-by-side, by using the following code.

body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment: fixed, fixed;
background-position: left top, right top, bottom;
}

Now, I'm trying to use the following code (mentioned below) for achieving the sunset effect on my background images, but it is not working. I've also tried removing the "before" element & adding the background images, along with gradients but then, it is appearing above the background images.

body:before {
background: linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -o-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -moz-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -ms-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012c57', endColorstr='#ffcb70');
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,203,112)), color-stop(0.3, rgb(107,138,169)), color-stop(1, rgb(205,217,230)) ) !important;
}

I want to display this code behind my background images, to achieve the sunset effect from the example website. I can't understand why it is not working. I will be grateful for any help.

Thank You.

Solution

You can do it with another html element inside the background image one.

<div> // has your background image
  <div class="gradient"> // will have the gradiant style
  </div>
</div>

css

.gradient {
  background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}

Here is an example fiddle

Note i just simplified the gradient css. Keep your own styling.

Consider the way you use the body tag like you currently do. You need to make sure the div inside (with the gradient) spans directly on top of the other div. Maybe you have to do something like

.parent {
  // The element with the image
  position: relative;
}

.child {
  // the element with the gradient
  position absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}