Fixed background

Work-around for image-attachment: fixed

by Jens Grochtdreis

HTML

<h1>Hier kommt Text vor dem Bild</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias labore architecto commodi qui animi autem delectus pariatur, praesentium quasi debitis placeat minima ratione accusamus atque est fuga facilis sequi ipsum ea eaque numquam doloremque porro possimus, asperiores! Et consectetur corporis ipsam nihil iste optio aspernatur, incidunt neque quaerat quo in corrupti est iure dicta distinctio, cumque nemo pariatur harum? Quasi voluptatum blanditiis voluptatibus obcaecati error qui exercitationem animi reiciendis quae dolorem et provident dolores est, placeat vero tempore reprehenderit expedita fugit ad neque dolore. Harum minima quae reiciendis sint cumque quam impedit fugit eum, optio debitis perspiciatis delectus quisquam vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem molestiae maiores eos suscipit distinctio unde maxime incidunt blanditiis amet, facilis iure commodi quae eligendi sequi, iste quos. Tenetur doloribus fugit explicabo quo ad laudantium nemo! Iste ipsa libero deleniti harum, magnam impedit voluptates nisi, quisquam id aspernatur officiis dolores nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo explicabo modi ipsum, hic sunt eveniet maxime nisi voluptatibus molestiae cumque pariatur labore rem, architecto consectetur doloremque excepturi at aut praesentium similique veritatis vitae, deleniti optio minima! At dicta, adipisci perferendis! Atque dolorum voluptates aliquam exercitationem. Nobis dolor eaque consectetur ducimus officia, quae facilis maiores consequatur esse suscipit numquam, cupiditate deserunt, distinctio quia iusto repellat laborum dolorem magni tenetur culpa fugit veritatis nulla voluptates praesentium. Sint omnis voluptatem commodi vel obcaecati, sunt nihil delectus, fuga alias similique ad ipsum. Id quae saepe libero labore non nostrum repudiandae aperiam, maiores fugiat quia fugit magni qui nobis dicta atque minima eveniet quis...

CSS

.container {
  height: 40vh;
}

.fixed-img {
  background-image: url("http://2.bp.blogspot.com/-pATX0YgNSFs/VP-82AQKcuI/AAAAAAAALSU/Vet9e7Qsjjw/s1600/Cat-hd-wallpapers.jpg");
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

h2 {
  text-align: center;
  color: white;
  font-size: 3em;
  position: relative;
  top: 45vh;
}

p {
  background: white;
  padding: 1em;
  width: 100%;
  margin: 0;
}