Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1155137

    Hi,

    How would I add a colored overlay with an opacity to the column “Surfboard Rentals” found about 2/3 down this page: https://www.surfschool.net/private-surf-lessons/

    Ideally, the overlay will cover the whole background image of the column while the text remains on top.

    Thanks for the help!

    #1155204

    the easiest way is to colorize it is f.e. in Photoshop et.al.
    all other methods would influence the whole column – or do not work on all browsers

    background-blend-mode f.e. : https://caniuse.com/#search=background-blend-mode
    with your example – you have to overwrite the inline rules – because the background image is set as background.

    .page-id-63 #banner {
        background-image: url("https://www.surfschool.net/wp-content/uploads/2019/07/beginner-surfboard-rentals-huntington-beach-banner.jpg") !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        padding: 45px 35px 45px 35px;
        border-radius: 15px;
        background-color: rgba(0,60,255,0.4) !important;
        background-blend-mode: multiply !important;
    }

    or background-blend-mode : soft-light is nice too – but IE and Edge do not support this – the mobile browser too etc. pp.

    #1155291

    Hi,

    Thanks for helping out @guenni007, did you try that out and did you have any luck with it @joesurf?

    Best regards,
    Rikard

    #1155488

    Thanks @guenni007 for the advice. Couldn’t get the CSS to work so just when the easy route with photoshopping the images with an overlay.

    Thanks again!

    #1155587

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1157053

    by the way the code couldn’t work because you changed the markup totaly – the ID etc .
    there was first an ID of: #banner – now it is : #av_section_12
    selector now is #av_section_12 .flex_column.av_one_full

    So if you like to see what happens :

    #av_section_12 .flex_column.av_one_full {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: rgba(0, 147, 255, 0.5) !important;
        background-blend-mode: soft-light !important;  
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.