Display Sunset Effect with Gradients Above Background Image in Body - css

Question

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.

Answer 1

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;
}

Answer 2

You can directly add the gradient to the other background-images (since the gradient property is considered a background image) like this:
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),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}
That worked for me and it's much easier than adding additional elements ;)