[Resolved] angled overlay on Background image in sections

[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

[David]

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

[Katharina]

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

[David]

Thats awesome 🙂 Glad to be of help

[Author]

Posts