Search code examples
csscss-shapes

Background image shaping

I am trying to make website with non-rectangular backgrounds. Here is image how it should look like: https://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50

I have tried so many advices from web, but nothing worked for me. Could anyone help me with that please? Thanks!

Solution

  • You could use transform:skewY to create such a design. A quick demo can be seen below, where the background property has been used along with some clever use of background-position to position "two halves" of the image together:

    div{
  width:100%;
  height:300px;
  position:relative;
  margin-top:50px;
  }
.part1:before,.part1:after{
    content:"";
  position:absolute;
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:200% 100%;
  background-position:0 0;
  height:100%;
  width:50%;top:0;left:0;
  transform:skewY(5deg);
  transform-origin:top left;
  }
.part1:after{
  left:50%;
  transform:skewY(-5deg);
  transform-origin:top right;
  background-position:-100% 0;
  }
.part2{
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:100% 100%;
  transform: perspective(2000px) rotateY(-30deg);
transform-origin:top right;
  }
    <div class="part1"></div>

<div class="part2"></div>