fixed background element example

by Jason Davis

HTML

<img class="fixedBackground" src="https://s-media-cache-ak0.pinimg.com/236x/88/be/79/88be79475d242373f8cecb76006f9f5b.jpg" />
<div class="floating-block">
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <img src="https://s-media-cache-ak0.pinimg.com/236x/88/be/79/88be79475d242373f8cecb76006f9f5b.jpg" />
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
  <p>Text, or any content, scroll over the top of fixed position images
  </p>
</div>

CSS

.fixedBackground {
  width: 100%;
  position: fixed;
  top: 0;
}

.floating-block {
  position: relative;
  background-color: transparent;
}

p {
  margin-bottom: 50px;
}

body {
  padding: 0;
  margin: 0;
}