Reduce opacity on Dynamic BG Image from CMS but not on Text Elements in Div

Design help CMS
#1

I am trying to place an image that is dynamically pulled from the CMS to be placed as a background as a tile, with text over it.

The opacity of the background image needs to be 50%, but currently, everytime I reduce the background opacity, then the text over it also becomes 50% opacity.

I tried to add a gradient layer over the background, but it keeps breaking as it sees it as a whole new image.

Please help!

Adding screenshots.

Screen Shot 2020-07-01 at 2.17.46 AM
Screen Shot 2020-07-01 at 2.17.46 AM2560×1384 581 KB
Screen Shot 2020-07-01 at 2.17.35 AM
Screen Shot 2020-07-01 at 2.17.35 AM2560×1384 614 KB

Here is my public share link: https://preview.webflow.com/preview/fishhook?utm_medium=preview_link&utm_source=designer&utm_content=fishhook&preview=1e007ea31e18e18c0d60e0654b34a317&pageId=5efb34fb418cf05bd56f3923&mode=preview

#2

Hey Rajath & welcome!
The text nested inside the div is a child of that div and will inherit the opacity. You could change the structure the following:

  1. Remove the BG img from the wrapping div and set its position to relative
  2. Add another div inside the wrapping div as another child to the other elements
  3. Give that new div the BG img and set it so position absolute and let it fill the wrapping div
  4. Now you can set the BG img to translucent without altering all contents