CSS справочник > background-attachment > Использование свойства background-attachment

Использование свойства background-attachment

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
    body { height: 1000px; margin: 0; }
    div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; }
    #scroll { background: #00ff00 url('css.png') no-repeat scroll; }
    #local { background: #00ff00 url('css.png') no-repeat local; }
    #fixed { background: #00ff00 url('css.png') no-repeat fixed; }
  </style>
</head>
<body>
 
  <div id="scroll"> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br>scroll<br> scroll<br> scroll<br> scroll</div>
 
  <div id="fixed"> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br>fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br>fixed<br> fixed</div>
 
  <div id="local"> local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br>local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br>local<br> local</div>
 
</body>
</html>

Результат:

Отредактируйте код, указанный выше, и нажмите кнопку "GO" для просмотра результата.