Background Flip

by skibulk

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(http://i.stack.imgur.com/I4hlZ.png) left bottom;
}

.wrap2 {
    transform: scaleY(-1);
    background:
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left top,
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left 500px;
}

p {
    padding: 100px;
}