Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 9, 2019 at 3:39 am #1155137
    JoeSurf

    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!

    November 9, 2019 at 1:06 pm #1155204
    Guenni007

    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.

    November 10, 2019 at 5:13 am #1155291
    Rikard

    Hi,

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

    Best regards,
    Rikard

    November 11, 2019 at 5:58 am #1155488
    JoeSurf

    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!

    November 11, 2019 at 1:48 pm #1155587
    Rikard

    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

    November 15, 2019 at 4:49 am #1157053
    Guenni007

    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;  
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.