[How to] Create Angled Page Sections (aka False Bottoms)

design
ui

#21

@noah or @Stefano have you tried using this with an image? Up until now I had only used solid color backgrounds and it has worked smooth as silk… but I just tried it with an image and it is no bueno :frowning:

The image repeats half way through the section. Is there a way to have this work with full width background images? Or is this really only for solid color backgrounds?

Joe


#22

I had the same issue with images – couldn’t get it to work :frowning:


#23

Hey @Joe_Savitch, I’d recommend applying the angled top/bottom to the sections before and after your section with the background image.


#24

Hey Joe!

My workaround was the same as Noah’s below… let me know if that works for you? I was having the same issues when having photos in the bg.


#25

@noah… brilliant. Simple solution.

Joe


#27

Angled Hero Images & Gradients

For brand imagery and gradients in the hero/top section of a landing page, I adjusted @Noah original code and changed the “after” background element from inherit to “linear”.

Below is the adjusted code for the “after” section of code.

}
#lp-pom-block-8:after{
background: linear;
bottom: 0;
content: ‘’;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-5deg);
transform-origin: 100%;
z-index: 1;
}

// Yosh


#28

Like others, I’m having issues with background images repeating and also skewing the image itself and am having difficulty trouble-shooting the cause.


#29

@Tristan_Ramberg
That looks like what mine looked like before changing the background to linear. Feel free to share your code in the thread or dm it to me and I can try and help.


#30

@Noah @Stefano When I apply an angle of more than 7 deg I start to see wierdness. AKA the part of the bg that is angled breaks away from the rest of the background and some white bleeds through. Any way to get around this?

Joe


#31

Thank you for this, finally have a new unbounce site to actually test this on.

I think it’s going to kill it


#32

Hi man,

I am trying the linear code, but it only cancels the angles. How did you solve the repeating situation?