Vlastnosť background-attachment

Vlastnosť background-attachment určuje, ako sa má posúvať obrázok pozadia elementu: spolu s textom alebo či má text posúvať cez obrázok.

Syntax

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

Hodnoty

Hodnota	Popis
`fixed`	Obrázok pozadia bude nepohyblivý a text sa bude posúvať cez neho.
`scroll`	Obrázok pozadia sa bude posúvať spolu s textom.
`local`	Pozadie je fixované s ohľadom na správanie sa elementu. Ak má element posúvanie, potom sa pozadie bude posúvať spolu s obsahom, ale pozadie, ktoré prekračuje rámec elementu, zostane na mieste.

Predvolená hodnota: scroll.

Príklad . Hodnota scroll

Teraz je vlastnosť background-attachment nastavená na hodnotu scroll. Posúvajte element zvisle - uvidíte, ako sa text posúva spolu s pozadím:

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

Príklad . Hodnota fixed

A teraz je vlastnosť background-attachment nastavená na hodnotu fixed. Posúvajte element zvisle - uvidíte, ako sa text posúva cez pozadie:

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

Pozri tiež

vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie