JSFiddle - React, Tailwind, and code Playground

HTML

<section id="middle">
			<div class="wrapper">
        <div>
        </div>
			</div>
</section>

CSS

#middle {padding:0;}
#middle > .wrapper {
    max-width: 100%;
    min-width: 100%;
    margin: 0 auto;
    position: relative;
    text-align:center;
    color:#000;
}
#middle .wrapper > div {
    position:relative;
    z-index:2;
    padding: 0;
}
#middle .wrapper:before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 175px;
    background: url(http://antvark.ee/wp-content/themes/av/img/middle-bg.jpg);
    background-size: 100% 100%;
    z-index: 1;
    -webkit-perspective-origin: 50%, 50%;
    -moz-perspective-origin: 50%, 50%;
    -o-perspective-origin: 50%, 50%;
    -ms-perspective-origin: 50%, 50%;
    perspective-origin: 50%, 50%;
    -webkit-transform: skew(0deg, -5deg);
    -moz-transform: skew(0deg, -5deg);
    -o-transform: skew(0deg, -5deg);
    -ms-transform: skew(0deg, -5deg);
    transform: skew(0deg, -5deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;    
}