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

@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

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

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

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.

@noah… brilliant. Simple solution.

Joe

2 Likes

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

1 Like

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

@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.

@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

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

I think it’s going to kill it

Hi man,

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

Hi Yosh, when I change the code like this, the angle doesn’t work at all. Any idea why?

I’m using an image, as I need a gradient in an angle that Unbounce doesn’t support.

Thank you @Noah !!!

I’m having issues with the overlay in my background not accepting the angled section of the page. Any insight here?
@Noah

Anyone know what to change -3.75deg to in for the angle to go right bottom? With -3.75deg, it goes left bottom.

@Mark_H

CSS
transform: skewY(-3.75deg); /change to increase/decrease angle/

You should be able to do some drastic tweaks editing the skewY figure

When viewing these on ultrawide monitors I am getting these breaks. Is there an easy fix for this one?