<div class="wrap wrap1">
  <h1>background-attachment:scroll;</h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p style="margin: 100px 0;"> 이 영역에서 스크롤을 통해  scroll과 fixed의 차이를 느껴보세요</p>
<div class="wrap wrap2">
  <h1>background-attachment:fixed;</h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrap wrap3">
  <h1>background-attachment:local;</h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>


.wrap{background:url(http://placekitten.com/800/500) no-repeat 50% 50%; width:100%; height:300px;overflow: auto;}
.box{width:100px; height:30px; background:#555; margin: 0 auto 50px;}
.wrap1{background-attachment:scroll;}
.wrap2{background-attachment:fixed;}
.wrap3{background-attachment:local;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.