Eigenschap background-attachment

De eigenschap background-attachment bepaalt hoe de achtergrondafbeelding van een element scrollt: samen met de tekst of de tekst zal over de afbeelding glijden.

Syntaxis

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

Waarden

Waarde	Beschrijving
`fixed`	De achtergrondafbeelding zal stilstaan, en de tekst zal eroverheen glijden.
`scroll`	De achtergrondafbeelding zal samen met de tekst meescrollen.
`local`	De achtergrond wordt vastgezet rekening houdend met het gedrag van het element. Als het element scrollbaar is, dan zal de achtergrond meescrollen met de inhoud, maar de achtergrond die buiten de grenzen van het element valt, blijft op zijn plaats.

Standaardwaarde: scroll.

Voorbeeld . Waarde scroll

Momenteel is de eigenschap background-attachment ingesteld op de waarde scroll. Scroll het element verticaal - u zult zien hoe de tekst meescrollt met de achtergrond:

<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;
}

Voorbeeld . Waarde fixed

En nu is de eigenschap background-attachment ingesteld op de waarde fixed. Scroll het element verticaal - u zult zien hoe de tekst over de achtergrond glijdt:

<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;
}

Zie ook

de eigenschap background,
wat een verkorte eigenschap is voor de achtergrond