<h2>Sabit Ardalan (fixed)</h2>
<div class="sabit">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat pharetra finibus. Ut pharetra, elit pulvinar tempus dignissim, urna tortor imperdiet purus, et blandit arcu metus sed felis. Praesent facilisis bibendum diam ut congue. Maecenas tempus orci id condimentum imperdiet. Pellentesque pellentesque non mi vitae vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum neque lacus, ac ullamcorper ex dictum ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique tincidunt dolor, sed consequat quam tempus a. Aenean non mi pellentesque, blandit nisi non, tempus urna. Mauris elit nisl, tincidunt ut ipsum eget, molestie consectetur ipsum. Curabitur pulvinar, nisl a blandit auctor, nisi ex fringilla sem, nec tristique neque ante nec massa.</p>

<p>Praesent ullamcorper vitae neque viverra posuere. Suspendisse iaculis libero sit amet dui vehicula finibus sit amet vel magna. Suspendisse interdum dapibus sapien. Ut non erat ligula. Sed vel nibh sit amet nisi scelerisque commodo quis sit amet diam. Morbi sodales ante metus, aliquet placerat magna placerat vitae. Duis non risus diam. Nullam sagittis elit varius, porta lorem eu, tempus metus. Etiam lacinia mattis nulla eu interdum. Fusce nec leo vitae dui dictum elementum. In hac habitasse platea dictumst. Curabitur tempus, orci a porta semper, nibh mi rutrum lacus, eu laoreet leo diam id mauris. In bibendum, urna id blandit mollis, massa dolor tempor urna, a ornare enim leo eu magna. Nullam vitae ex vel ex tincidunt ornare in id magna. Praesent eget nisi eu dolor convallis varius. Ut pharetra dignissim diam in cursus.

Vestibulum libero enim, maximus nec facilisis quis, vehicula sed nunc. Pellentesque rutrum, lacus vel sollicitudin tristique, velit lorem dapibus libero, non porttitor risus lorem nec libero. Suspendisse potenti. Sed quis ipsum eu arcu ornare ornare. Curabitur diam odio, aliquam lacinia neque eu, facilisis sagittis elit. Vivamus quis dui sem. Suspendisse eget bibendum turpis, a volutpat tortor. Sed aliquam aliquam nisi, a molestie risus tincidunt a. Praesent ut pretium quam. Sed id placerat arcu, vel faucibus erat. Aenean nisl eros, hendrerit ut suscipit faucibus, sodales vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie tempor pharetra.<p>

</div>
<h2>Ardalan Kaydır (scroll)</h2>
<div class="kaydir">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat pharetra finibus. Ut pharetra, elit pulvinar tempus dignissim, urna tortor imperdiet purus, et blandit arcu metus sed felis. Praesent facilisis bibendum diam ut congue. Maecenas tempus orci id condimentum imperdiet. Pellentesque pellentesque non mi vitae vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum neque lacus, ac ullamcorper ex dictum ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique tincidunt dolor, sed consequat quam tempus a. Aenean non mi pellentesque, blandit nisi non, tempus urna. Mauris elit nisl, tincidunt ut ipsum eget, molestie consectetur ipsum. Curabitur pulvinar, nisl a blandit auctor, nisi ex fringilla sem, nec tristique neque ante nec massa.</p>

<p>Praesent ullamcorper vitae neque viverra posuere. Suspendisse iaculis libero sit amet dui vehicula finibus sit amet vel magna. Suspendisse interdum dapibus sapien. Ut non erat ligula. Sed vel nibh sit amet nisi scelerisque commodo quis sit amet diam. Morbi sodales ante metus, aliquet placerat magna placerat vitae. Duis non risus diam. Nullam sagittis elit varius, porta lorem eu, tempus metus. Etiam lacinia mattis nulla eu interdum. Fusce nec leo vitae dui dictum elementum. In hac habitasse platea dictumst. Curabitur tempus, orci a porta semper, nibh mi rutrum lacus, eu laoreet leo diam id mauris. In bibendum, urna id blandit mollis, massa dolor tempor urna, a ornare enim leo eu magna. Nullam vitae ex vel ex tincidunt ornare in id magna. Praesent eget nisi eu dolor convallis varius. Ut pharetra dignissim diam in cursus.

Vestibulum libero enim, maximus nec facilisis quis, vehicula sed nunc. Pellentesque rutrum, lacus vel sollicitudin tristique, velit lorem dapibus libero, non porttitor risus lorem nec libero. Suspendisse potenti. Sed quis ipsum eu arcu ornare ornare. Curabitur diam odio, aliquam lacinia neque eu, facilisis sagittis elit. Vivamus quis dui sem. Suspendisse eget bibendum turpis, a volutpat tortor. Sed aliquam aliquam nisi, a molestie risus tincidunt a. Praesent ut pretium quam. Sed id placerat arcu, vel faucibus erat. Aenean nisl eros, hendrerit ut suscipit faucibus, sodales vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie tempor pharetra.<p>

</div>
<h2>Ardalan yerel (local)</h2>
<div class="yerel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat pharetra finibus. Ut pharetra, elit pulvinar tempus dignissim, urna tortor imperdiet purus, et blandit arcu metus sed felis. Praesent facilisis bibendum diam ut congue. Maecenas tempus orci id condimentum imperdiet. Pellentesque pellentesque non mi vitae vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum neque lacus, ac ullamcorper ex dictum ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique tincidunt dolor, sed consequat quam tempus a. Aenean non mi pellentesque, blandit nisi non, tempus urna. Mauris elit nisl, tincidunt ut ipsum eget, molestie consectetur ipsum. Curabitur pulvinar, nisl a blandit auctor, nisi ex fringilla sem, nec tristique neque ante nec massa.</p>

<p>Praesent ullamcorper vitae neque viverra posuere. Suspendisse iaculis libero sit amet dui vehicula finibus sit amet vel magna. Suspendisse interdum dapibus sapien. Ut non erat ligula. Sed vel nibh sit amet nisi scelerisque commodo quis sit amet diam. Morbi sodales ante metus, aliquet placerat magna placerat vitae. Duis non risus diam. Nullam sagittis elit varius, porta lorem eu, tempus metus. Etiam lacinia mattis nulla eu interdum. Fusce nec leo vitae dui dictum elementum. In hac habitasse platea dictumst. Curabitur tempus, orci a porta semper, nibh mi rutrum lacus, eu laoreet leo diam id mauris. In bibendum, urna id blandit mollis, massa dolor tempor urna, a ornare enim leo eu magna. Nullam vitae ex vel ex tincidunt ornare in id magna. Praesent eget nisi eu dolor convallis varius. Ut pharetra dignissim diam in cursus.

Vestibulum libero enim, maximus nec facilisis quis, vehicula sed nunc. Pellentesque rutrum, lacus vel sollicitudin tristique, velit lorem dapibus libero, non porttitor risus lorem nec libero. Suspendisse potenti. Sed quis ipsum eu arcu ornare ornare. Curabitur diam odio, aliquam lacinia neque eu, facilisis sagittis elit. Vivamus quis dui sem. Suspendisse eget bibendum turpis, a volutpat tortor. Sed aliquam aliquam nisi, a molestie risus tincidunt a. Praesent ut pretium quam. Sed id placerat arcu, vel faucibus erat. Aenean nisl eros, hendrerit ut suscipit faucibus, sodales vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie tempor pharetra.<p>

</div>
h2
  width 550px
  margin 0 auto

div
  width 550px
  margin 0 auto 20px auto
  height 250px
  overflow auto
  background-image url(http://fatihhayrioglu.com/images/css3-kitap.png)
  background-repeat no-repeat
  background-position 50% 20px
  
  &.sabit
    background-attachment fixed
    
  &.kaydir
    background-attachment scroll
    
  &.yerel
    background-attachment local
  p
    margin-bottom 10px

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.