Changing opacity on background images

Home Forums Jevelin Theme Changing opacity on background images

Home Forums Jevelin Theme Changing opacity on background images

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • theembroideryshop
    Participant

    Hello – I would like to change the opacity on my background image on the subscribe widget at http://www.theembroideryshopil.com. That way the text stands out more. Can you help?

    540media
    Participant

    An easy way would be to edit the picture in Photoshop.  Currently, there is no way for CSS to natively change a background-image opacity.  There are a few workarounds and tweaks you can do with pseudo-elements, but editing it directly in Photoshop or a similar photo editing software would be easier and involve no coding skills.

    Hi @theembroideryshop,

     

    I hope you are well today and thank you for your question.

     


    @540media
    has provided answer very well above but i want to also share you alternate solution to highlight subscribe section and text by adding transparent black background to it.

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #subscribe .sh-column {
        background: rgba(0,0,0,0.5);
    }

     

    Best regards,
    Shufflehound team

    theembroideryshop
    Participant

    Thanks for the code but it is leaving a straight line across the picture. If you could check that out and see what’s causing that?

    Please try using below CSS code instead of above.

     

    #subscribe .sh-column:last-child {
        background: rgba(0,0,0,0.7);
    }

    theembroideryshop
    Participant

    Yes! That works. Thank you.

     

    Sorry, one last question. I can’t seem to find how to change the background image on my footer? It’s driving me crazy. 🙂

    You can change the background image of footer from footer styling option of theme as shown in the attached screenshots.

    Attachments:
    You must be logged in to view attached files.
Viewing 7 posts - 1 through 7 (of 7 total)