Ominaisuus background-attachment

Ominaisuus background-attachment määrittää kuinka elementin taustakuva vieritetään: yhdessä tekstin kanssa vai liukuuko teksti kuvan päällä.

Syntaksi

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

Arvot

Arvo	Kuvaus
`fixed`	Taustakuva pysyy paikallaan ja teksti liukuu sen päällä.
`scroll`	Taustakuva vieritetään yhdessä tekstin kanssa.
`local`	Tausta kiinnitetään ottaen huomioon elementin käyttäytyminen. Jos elementillä on vieritys, tausta vieritetään sisällön mukana, mutta elementin rajojen ulkopuolelle ulottuva tausta pysyy paikallaan.

Oletusarvo: scroll.

Esimerkki . Arvo scroll

Nyt ominaisuus background-attachment on asetettu arvoon scroll. Vieritä elementtiä pystysuunnassa - näet kuinka teksti vierii taustan mukana:

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

Esimerkki . Arvo fixed

Nyt ominaisuus background-attachment on asetettu arvoon fixed. Vieritä elementtiä pystysuunnassa - näet kuinka teksti liukuu taustan päällä:

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

Katso myös

ominaisuus background,
joka on lyhennysominaisuustausta