Ιδιότητα background-attachment

Η ιδιότητα background-attachment ορίζει τον τρόπο κύλισης της εικόνας φόντου ενός στοιχείου: μαζί με το κείμενο ή το κείμενο θα γλιστράει πάνω από την εικόνα.

Σύνταξη

επιλογέας {
	background-attachment: fixed | scroll | local;
}

Τιμές

Τιμή	Περιγραφή
`fixed`	Η εικόνα του φόντου θα είναι ακίνητη, ενώ το κείμενο θα γλιστράει πάνω της.
`scroll`	Η εικόνα του φόντου θα κύλιζει μαζί με το κείμενο.
`local`	Το φόντο σταθεροποιείται λαμβάνοντας υπόψη τη συμπεριφορά του στοιχείου. Εάν το στοιχείο έχει κύλιση, τότε το φόντο θα κύλιζει μαζί με το περιεχόμενο, αλλά το φόντο που υπερβαίνει τα όρια του στοιχείου παραμένει στη θέση του.

Προεπιλεγμένη τιμή: scroll.

Παράδειγμα . Τιμή scroll

Τώρα η ιδιότητα background-attachment έχει οριστεί στην τιμή scroll. Κάντε κύλιση του στοιχείου κατακόρυφα - θα δείτε πώς το κείμενο κυλά μαζί με το φόντο:

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

Παράδειγμα . Τιμή fixed

Και τώρα η ιδιότητα background-attachment έχει οριστεί στην τιμή fixed. Κάντε κύλιση του στοιχείου κατακόρυφα - θα δείτε πώς το κείμενο γλιστράει πάνω από το φόντο:

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

Δείτε επίσης

η ιδιότητα background,
που αποτελεί συντόμευση για το φόντο