<div class="container">
  <p>
    The following element's background image is set to <code>fixed</code>. So it is fixed relative to the viewport (your browser window). It is not fixed relative to the element, so it does <em>not</em> scroll with the element as it scrolls. You can see that only part of the image is visible inside the element's background area. Note that if an image is small and not tiled, it may not even be visible inside the element at all. As the element scrolls, the image stays in its position, fixed relative to the viewport.
  </p>
  <p>
    Scroll the page down to see how the background image stays fixed as the element itself scrolls up.
  </p>
  <div class="el">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, debitis doloribus qui sapiente doloremque et ullam. Debitis, nostrum, commodi, quam quas incidunt ea inventore sapiente tempora aspernatur earum neque laboriosam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat minus sint harum quibusdam neque. Consectetur, alias assumenda reiciendis at iure dicta error accusantium veritatis placeat laudantium quos porro blanditiis ad.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, tempora, totam, cum quis provident consequatur est dolorem reprehenderit deserunt quae nulla officia eos voluptate molestiae excepturi. Dolore, quidem sint perspiciatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat minus sint harum quibusdam neque. Consectetur, alias assumenda reiciendis at iure dicta error accusantium veritatis placeat laudantium quos porro blanditiis ad.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, tempora, totam, cum quis provident consequatur est dolorem reprehenderit deserunt quae nulla officia eos voluptate molestiae excepturi. Dolore, quidem sint perspiciatis.</p>
  </div>
  <p>
    We use <code>background-size: cover</code> so that the background image covers the entire viewport area, and thus is be visible inside the element's background area as well (until the element scrolls out of view, of course).
  </p>
  <p>Image from <a href="http://unsplash.com">Unsplash.com</a></p>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  min-height: 1000px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

p {
  margin-bottom: 30px;
}

.el {
  border: 5px solid #fff;
  padding: 20px;
  background-color: #fff;
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-attachment/paris.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /*background-repeat: repeat;*/
  background-attachment: fixed;
  color: #fff;
  width: 80%;
  height: 300px;
  border: 5px solid #eee;
  overflow-y: scroll;
}