Propriété background-attachment

La propriété background-attachment définit la manière de faire défiler l'image de fond d'un élément : avec le texte ou si le texte glissera sur l'image.

Syntaxe

sélecteur {
	background-attachment: fixed | scroll | local;
}

Valeurs

Valeur	Description
`fixed`	L'image de fond sera immobile, et le texte glissera sur elle.
`scroll`	L'image de fond défilera avec le texte.
`local`	Le fond est fixé en tenant compte du comportement de l'élément. Si l'élément a un défilement, le fond défilera avec le contenu, mais le fond qui dépasse les limites de l'élément reste en place.

Valeur par défaut : scroll.

Exemple . Valeur scroll

Actuellement, la propriété background-attachment est définie sur la valeur scroll. Faites défiler l'élément verticalement - vous verrez comment le texte défile avec le fond :

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

Exemple . Valeur fixed

Et maintenant, la propriété background-attachment est définie sur la valeur fixed. Faites défiler l'élément verticalement - vous verrez comment le texte glisse sur le fond :

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

Voir aussi

la propriété background,
qui est une propriété raccourcie pour le fond