თვისება 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,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის