Propriedade background-attachment

A propriedade background-attachment define como a imagem de fundo de um elemento deve ser rolada: junto com o texto ou se o texto deve deslizar sobre a imagem.

Sintaxe

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

Valores

Valor	Descrição
`fixed`	A imagem de fundo permanecerá fixa, e o texto deslizará sobre ela.
`scroll`	A imagem de fundo será rolada junto com o texto.
`local`	O fundo é fixado considerando o comportamento do elemento. Se o elemento tiver rolagem, o fundo será rolado junto com o conteúdo, mas o fundo que ultrapassa os limites do elemento permanece no lugar.

Valor padrão: scroll.

Exemplo . Valor scroll

Agora a propriedade background-attachment está definida como scroll. Role o elemento verticalmente - você verá como o texto é rolado junto com o fundo:

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

Exemplo . Valor fixed

Agora a propriedade background-attachment está definida como fixed. Role o elemento verticalmente - você verá como o texto desliza sobre o fundo:

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

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo