Proprietà background-attachment

La proprietà background-attachment definisce come far scorrere l'immagine di sfondo di un elemento: insieme al testo o se il testo scivolerà sull'immagine.

Sintassi

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

Valori

Valore	Descrizione
`fixed`	L'immagine di sfondo sarà fissa, mentre il testo scorrerà su di essa.
`scroll`	L'immagine di sfondo scorrerà insieme al testo.
`local`	Lo sfondo è fissato considerando il comportamento dell'elemento. Se l'elemento ha lo scorrimento, lo sfondo scorrerà insieme al contenuto, ma lo sfondo che esce dai bordi dell'elemento rimane al suo posto.

Valore predefinito: scroll.

Esempio . Valore scroll

Ora la proprietà background-attachment è impostata sul valore scroll. Scorri l'elemento verticalmente - vedrai come il testo scorre insieme allo sfondo:

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

Esempio . Valore fixed

E ora la proprietà background-attachment è impostata sul valore fixed. Scorri l'elemento verticalmente - vedrai come il testo scivola sullo sfondo:

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

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo