Proprietatea background-attachment

Proprietatea background-attachment stabilește modul în care se defilează imaginea de fundal a elementului: împreună cu textul sau textul va aluneca peste imagine.

Sintaxă

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

Valori

Valoare	Descriere
`fixed`	Imaginea de fundal va fi staționară, iar textul va aluneca peste ea.
`scroll`	Imaginea de fundal se va defila împreună cu textul.
`local`	Fundalul este fixat ținând cont de comportamentul elementului. Dacă elementul are defilare, fondul se va defila împreună cu conținutul, dar fundalul care iese în afara limitelor elementului rămâne pe loc.

Valoare implicită: scroll.

Exemplu . Valoarea scroll

Acum proprietatea background-attachment este setată la valoarea scroll. Defilați elementul pe verticală - veți vedea cum textul se defilează împreună cu fundalul:

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

Exemplu . Valoarea fixed

Acum proprietatea background-attachment este setată la valoarea fixed. Defilați elementul pe verticală - veți vedea cum textul alunecă peste fundal:

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

Vedeți și

proprietatea background,
care reprezintă o proprietate scurtă pentru fundal