<div class="container">
  <p>The following element's background image is set to <code>scroll</code>. It is thus fixed relative to the element itself. It scrolls with the element (as it is "glued" to it) but does not scroll with the content inside the element.</p>
  <div class="el el-1">
    <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. 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. 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>The following element's background image is set to <code>local</code>. It is thus fixed relative to the element's content. It scrolls with the content because it is "glued" to the content, not the element itself. </p>
  <div class="el el-2">
    <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>
</div>
body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

p {
    margin-bottom: 30px;
}

.el {
    padding: 40px;
    background-color: #fff;
    background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-attachment/logo.png);
    background-repeat: no-repeat;
    background-position: 50% 20px;
  
    /*background-size: cover;*/

    color: #777;
    width: 80%;
    height: 300px;
    overflow-y: scroll;
    border: 5px solid #eee;
}

.el-1 {
    background-attachment: scroll;
}

.el-2 {
    background-attachment: local;
}