CSS background-attachment property

Description

CSS background-attachment property represents the position of background image within a box. The position of box is specified with respect to both the viewport (visible area of web page) and the content within the box.

Please use the 'inner (box)' and 'outer (viewport)' scrollbars to understand and distinguish between these properties.

Syntax

background-attachment : fixed | scroll | local

Property values

fixedDefault: The background is fixed with respect to both the content box and the viewport.; The background-image remains fixed with respect to both the box and the viewport.; background-attachment: fixed;
Try it
scroll: The background remains fixed with respect to the content box but scrolls with respect to viewport.; The background-image remains fixed with respect to the content box but does not remain fixed with respect to viewport.; background-attachment: scroll;
Try it
local: The background does not remain fixed with respect to both the content box and the viewport.; The background-image scrolls with respect to both content box and viewport.; background-attachment: local;
Try it

Applicable to

It applies to all elements

Preview

Code

CSS

.element{
width:100%;
height:200px;
background-image:url("img/background.jpg");
overflow:scroll;
}

HTML

<div class="element">
<p>The background is fixed with respect to the viewport.</p>
<p>The background scrolls with respect to the viewport.</p>
<p>The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.</p>
<p>The background is fixed with respect to the viewport.</p>
<p>The background scrolls with respect to the viewport.</p>
<p>The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.</p>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to