0

Looking to do a Parallax Effect on a skewed background. Had a look around on Google and the likes and can see everyone is doing this with an image. Just wondering if anyone has come across a solution where you can do this with a solid colour?

The reason I ask, Is that my design is a solid colour, However the background is using CSS3's Skew to transform the angle.

My current CSS (If it's any use) is as follows :

.diagonal {
  transform: skew(0deg, 2deg);
  background: #2188c9;
  margin-top: -200px;
  padding-top: 200px;
  height: 220px;
}
.diagonal .content {
  transform: skew(0deg, -2deg);
  z-index: 1;
}

I've made a jsFiddle for this too.

If it's not achievable. I don't mind making a blue background image in its place.

Thanks

StuBlackett
  • 3,789
  • 15
  • 68
  • 113

0 Answers0