CSS background-attachment

The CSS background-attachment property specifies whether a background image should be fixed or scroll with the containing block.

Syntax:	background-attachment: <value>
Possible Values:	scroll fixed inherit
Initial Value:	Scroll
Applies to:	All elements
Inherited:	No
Media:	Visual
Example	`background-attachment: fixed`
Try it yourself!	<style type="text/css"> .contentBox { color:ff9900; width:200px; height:150px; border:1px solid #000000; overflow:scroll; background: url("/pix/smile.gif"); background-repeat: no-repeat; background-attachment: fixed; } </style> <div class="contentBox"> <p>As the W3C says, <blockquote>"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."</blockquote></p></div>

Enjoy this page?

Link to this page (copy/paste into your own website or blog):

Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Enjoy this page?