infinity pro front page background image transparency

[VHughes]

I would like to add css to create transparency in the front page background images, (which I have as solid colors), allowing the main background image, (photo), to be seen as you scroll.
I have tried making a transparent graphic but that didn't work.
I also tried using the Genesis Super Customizer widget but there are no transparency/opacity options for those images, only for the footer.

I found the following code at https://brutalbusiness.com/add-front-page-image-overlays-to-genesis-infinity-pro/
for adding an overlay, (which works), but I do not know how to modify it for transparency, or if it could be.

Thank you for any help you can offer.

/* CSS: Add Front Page Image Overlays */

.front-page-1 {
position: relative;
z-index: 9;
}

.front-page-1:before,
.front-page-3:before,
.front-page-5:before,
.front-page-7:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .3); /* adjust the opacity (.3) as desired */
z-index: 0;
}

[VHughes]

I also tried using:

body
{ background-image: url("blue.png");
opacity: 0.6;
}

while it worked, it also gives the widgets in those background areas transparency.

[AsadMuhammad]

I used this theme in my site and achieve good results in the sense of infinity pro front page background image transparency.
footballminimodapk

[Author]

Posts