<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Background attachment example</title>
	<link rel="stylesheet" type="text/css" href="background-attachment.css">
</head>
<body>

<h1>Background attachment example</h1>

<section>
<article class="scroll">

  <p><code>background-attachment: scroll</code> causes the element's background to be fixed to the page, so that it scrolls when the page is scrolled. If the element content is scrolled, the background does not move.</p>
  
  <pre></pre>

</article>

<article class="fixed">

  <p><code>background-attachment: fixed</code> causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</p>
  
  <pre></pre>

</article>

<article class="local">

  <p><code>background-attachment: local</code>, new to CSS3, causes an element's background to be fixed to the actual element itself. So When the page is scrolled, the element's background will move along with it only if the element does so (so not in the case of elements with <code>position: fixed</code>.) When the element's content is scrolled, the background will scroll along with it.</p>
  
  <pre></pre>

</article>
</section>

</body>
</html>