html - Skew bottom background css -

i want reproduce mockup : http://imgur.com/zsr88fe

but don't know how skew background image, @ bottom. nom try transform skew image skewed , top of page ugly : http://imgur.com/tkugppw

what can fix ?

thanks in advance

to make bottom skew image css, you're gonna need few wrappers:

• content div text
• image wrapper create skew , hide skewed area
• image div contains nothing hero picture

then need apply opposite skew image div make not distorted. after have mess around positioning ensure of image visible , top skew hidden. maybe there's more clever solution, use hardcoded pixel values.

here's demo, , here's important bits:

html

<div class="hero">   <div class="bg-img-wrapper">     <div class="bg-img"></div>   </div>   <div class="hero-content">     <h1>cool company slogan</h1>     <p>catchy subslogan</p>   </div> </div> 

scss (you can replace variables , valid css, readability here)

$skewdeg: 5deg; $offset: 70px;  .hero {   height: 100vh; // make hero area take 100% height   overflow: hidden; // child's skew cause overflow, hide here   position: relative; // children positioned absolutely relative }  .bg-img-wrapper {   transform: skewy($skewdeg);   position: absolute;   top: -$offset; // move top skew offscreen   bottom: $offset; // move skewed area bit more of visible   right: 0;   left: 0;   overflow: hidden; // hide areas skewed away }  .bg-img {   background: url('https://unsplash.it/1280/720/?random') center no-repeat;   background-size: cover;   position: absolute;   top: $offset; // move image down amount of parent that's being rendered offscreen   bottom: -$offset;   right: 0;   left: 0;   transform: skewy(-$skewdeg); // skew opposite amount of parent make image straight again }  .hero-content {   position: relative; // relative positioning here makes hero content visible }