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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: transparent;
}

html, body, .wrap1, .wrap1::before, .wrap2 {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.wrap1 {
  background: url(http://i.stack.imgur.com/I4hlZ.png) center top;
}

.wrap1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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;
}

.wrap2 {
  position: absolute;
}

p {
  padding: 100px;
}