[Resolved] angled overlay on Background image in sections

Home Forums Support angled overlay on Background image in sections

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #824180
    Katharina

    I created this opt-in section with the angled overlay on top and bottom of the background image using CANVA.
    https://paste.pics/e6be596979f16bbf43869d6005e3182f

    Is it possible to add a CSS. that does it for me so I have always the same overlay on top and bottom when I change out the Image?

    Thanks
    Kati

    GP Premium 1.7.8
    #824359
    David
    Staff
    Customer Support

    Hi there,

    it wouldn’t work with a background image but you can do this with CSS:

    .angled-section {
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    
    .angled-section:before,
    .angled-section:after {
        background-color: #ffffff;
        content: '';
        display: block;
        height: 20%;
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        transform-origin: 0%;
    }
    
    .angled-section:before {
        top: 0;
        transform: skewY(-1.5deg);
    }
    
    .angled-section:after {
        bottom: 0;
        transform: skewY(1.5deg);
    }

    Give the Section a class angled-section

    #825294
    Katharina

    Thanks David, it worked and I figured out where to tweak so not all sections look the same.

    #825343
    David
    Staff
    Customer Support

    Thats awesome 🙂 Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.