Change overlay colour on header image

Hello

I just followed this guide to change the header image on all pages.

How do I also change the overlay colour on the header image?

Thank you!
Maria


Comments

  • edited February 3
    Hi
    Thanks for contacting to us.
    To change overlay color add the below css code inside the additional css box. 

    .page-title-section .overlay {
        background-color: rgba(68, 22, 22, 0.8) ! important;
    }

    Change grba  value as your need.

    Let us know for any confusion.

    Thanks 
    Prime 
  • this works.

    How do I make the overlay transparent?

    Thank u!
  • Hi 
    To make overlay more  transparent  reduce opacity value in background-color property.
    Like now its opacity value is 0.8.

    Change it to 0.4 or as your need.

    .page-title-section .overlay {
        background-color: rgba(68, 22, 22, 0.4) ! important;
    }


    Let me know for any confusion.

    Thanks 


  • Hello

    why is the overlay colour gray? I use the rgb values for a green colour, but when I change the last number to 0,4, the overlay colour changes to grey. Please review the attached screen shot.

    it looks like this:

    .page-title-section .overlay {
        background-color: rgba(200, 210, 202, 0,4) ! important;
    }

    but the overlay colour is grey.

    Thank u


    overlay.JPG
    1877 x 780 - 84K
  • Hi 
    Dear you have added comms in opacity value.
    Pls use dot (.) instead of com(,)  Like   below css code .

    .page-title-section .overlay {
        background-color: rgba(200, 210, 202, 0.4) ! important;
    }

    Let me know for any confusion.

    Thanks 
  • Thank you. I got it now :-) 
  • Hi 
    Glade to know that its work for you.
    If you like our theme and support pls give rate us here.
    Look forward see you again at Spicethemes.

    Thanks 
    Prime
This discussion has been closed.