Change Background Image overlay opacity during mobile screen size

Site URL: https://www.partners.forme.yoga

Hey everyone, 

I am trying to change the overlay opacity of my background image, during a mobile screen size. When the black text is over the top of the picture, I would like the image to have a higher percentage overlay opacity. In desktop mode, its ok, as the text is over the white portion of the image.

Can a CSS code fix this?

https://www.partners.forme.yoga

Matt

Add the following to Design > Custom CSS.

@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {

  [data-section-id="6045ee153d66415021433470"] .section-background {
  
    opacity : 0.5;
    
    }
  }

This is for v7.1 and specific the the OP's need.

You can play with the 0.5. The range is from 0 to 1.

Let us know how it goes.

@creedon I have the same concern as @Matt_J. The code you mentioned successfully changes the sections opacity. Any way to change just the image's opacity and not the text? 

Thanks

@mn27

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.