Background Flip

by zerrax

HTML

<div class="wrap1">
    <div class="wrap2">
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

.wrap1 {

transform: scaleY(-1);
    background: url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg) no-repeat left bottom;
width:100%;

}

.wrap2 {

position:relative;
    transform: scaleY(-1);
    background:
        url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg) no-repeat left top,
        url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg) no-repeat left 374px;

width:100%;
}

p {
    padding: 100px;
}