0

I am trying to create a website that looks like this

enter image description here

And the idea is to make a parallax scrolling the content over the background image.

Im not sure what would be the best approach to have the image cut like that, but I used a position absolute on a right angled triangle.

But when I scroll there is a flicker effect and so the parallax scroll does not look nice.

I know there are solutions out there suggesting using fixed positioning, but this does not help my case.

Can anyone explain to me what would be the best solution to achieve that cut on the background image and also have a smooth parallax scrolling over it?

Thank you

Emad
  • 346
  • 1
  • 6
  • 17

1 Answers1

0

You can create angle edges and borders on content using pseudo classes. More info here: http://lawrencenaman.com/css/responsive-slanted-divs-with-css/.

Effectively you would have something like this (adjust the skew angle to get your desired look):

.header .skew:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 250px;
  background: #00bcd4;
  z-index: -1;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
}

All credit to Lawrence Naman (http://lawrencenaman.com/) as this is his solution not mine

Mike Smith
  • 107
  • 1
  • 1
  • 11