The background-attachment property

The background-attachment property specifies how to scroll an element’s background image: together with a text, or the text will slide over the image.

Syntax

selector {
	background-attachment: fixed | scroll | local;
}

Values

Value	Description
`fixed`	A background image will be stationary, and a text will slide over it.
`scroll`	A background image will scroll along with a text.
`local`	A background is fixed based on the behavior of an element. If an element has scrolling, the background will scroll along with a content, but the background outside the element will remain in place.

Default value: scroll.

Example . The scroll value

Currently the background-attachment property is set to scroll. Scroll the element vertically - you will see the text scroll along with the background:

<body>
	<div id="elem">
		some long text...
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

Example . The fixed value

And now the background-attachment property is set to fixed. Scroll the element vertically - you will see the text sliding over the background:

<body>
	<div id="elem">
		some long text...
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

The background-attachment property

Syntax

Values

Example . The scroll value

Example . The fixed value

See also