CSS background-attachment (Interactive Example)

<!DOCTYPE html>
<title>Example</title>
<style>
.contentBox {
	width: 300px;
	height: 200px;
	border: 1px solid #000000;
	overflow: scroll;
  background-image: url("/pix/samples/bg1.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
}
</style>
<div class="contentBox">
  <p>As the W3C says:</p>
    <blockquote>
      <p>If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').</p>

      <p>Note that there is only one viewport per view. If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with the element, and a 'scroll' background doesn't move with the scrolling mechanism.</p>

      <p>Even if the image is fixed, it is still only visible when it is in the content, padding or border area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.</p>
    </blockquote>
</div>