Yea... that's my question; How to change the OPACITY of a background image?

My background image has both dark light spots so my text won't show up on certain places. I tried to change Opacity but it's actually changing the Opacity of my LOGO and Text (not my background image). Am I doing something wrong?

Try putting an overlay on top of the background image as a second child of the parent container, then the text as the third child make sure that your text and background image have different class names to the logo other text etc.
Then set the opacity on the overlay
You could also set a gradient for the overlay which I find works best for something like that
You can also give the overlay text a bit of a text shadow, keep the numbers small to avoid too much of a shadow and you could also add a stroke to the text, color same as text and set the width as REM by using REM you can increase the stroke by 2 decimal places once again giving the text some additional strength to make it stand out.

I can do a step by step video to demonstrate the way to do it, if that will help just shout out.
By the way which framework are you using
Bootstrap foundation materialize or Frameworkless

Thank you for your reply but.. I'm seriously struggling to digest and act on all of that. I have no idea how to put an overlay. Is that adding another white background on top of the existing one?

I suppose a video would be very nice in this case.

Thanks,
TW

Never mind. I used Photoshop to adjust the Opacity of the original background image and just changed it.
Thanks,
TW

If you need to have an image with reduced opacity and text on top again, you could check out this page in my component collection: https://mock-up.coffeecup.com/va-comps/ … t-img.html . You can download a ready-made component. It was made with Frameworkless, but if you are using one of the other layout systems in SD, you'll find the same on the respective pages.