Archived topic

angled overlay on Background image in sections

3 replies · Started by Katharina on February 28, 2019

Viewing posts 1–4 of 4

February 28, 2019 at 2:13 am #824180

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

February 28, 2019 at 5:20 am #824359

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

March 1, 2019 at 12:57 am #825294

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

March 1, 2019 at 2:00 am #825343

Thats awesome :) Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.