თვისება background-position

თვისება background-position ადგენს ელემენტის ფონური სურათის მდებარეობას. მდებარეობის მითითება შესაძლებელია ნებისმიერი ზომის ერთეულის გამოყენებით. პირველი მნიშვნელობა აღნიშნავს მარცხნიდან დაშორებას, მეორე - ზემოდან დაშორებას.

ასევე შესაძლებელია მდებარეობის მითითება საკვანძო სიტყვებით. ამ შემთხვევაში მნიშვნელობების თანმიმდევრობა არ აქვს მნიშვნელობა. საკვანძო სიტყვები ვერტიკალისთვის: top, center, bottom. საკვანძო სიტყვები ჰორიზონტალისთვის: left, center, right.

როგორ გამოვიყენოთ საკვანძო სიტყვები

სურათის საკვანძო სიტყვით განსათავსებლად, საჭიროა მივუთითოთ ერთი მნიშვნელობა ვერტიკალისთვის და ერთი ჰორიზონტალისთვის. მაგალითად, თუ მივუთითებთ მნიშვნელობას top right, სურათი განთავსდება ზემოთ მარჯვნივ.

სიტყვების თანმიმდევრობას მნიშვნელობა არ აქვს: შეგიძლიათ დაწეროთ top right, ან right top. თუ არის საკვანძო სიტყვა center - მისი გამოტოვება შესაძლებელია. მაგალითად, top center იგივეა, რაც უბრალოდ top. ხოლო center center იგივეა, რაც უბრალოდ center.

სინტაქსი

სელექტორი {
	background-position: ორი მნიშვნელობა სფეისით გამოყოფილი;
}

მაგალითი

სტანდარტულად, ფონური სურათი იქნება ზედა მარცხენა კუთხეში:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი ზედა მარჯვენა კუთხეში:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი ქვედა მარჯვენა კუთხეში:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი მარჯვნივ და ვერტიკალურად ცენტრში:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი ბლოკის ცენტრში:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი 20px მანძილზე მარცხნიდან და 40px ზემოდან:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი 90% მანძილზე მარცხნიდან და 100% ზემოდან:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი 30px მანძილზე მარცხნიდან და ვერტიკალურად ქვემოთ:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი 30px მანძილზე მარცხნიდან და ვერტიკალურად ცენტრში:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

განვათავსოთ ფონური სურათი 30px მანძილზე ზემოდან და ჰორიზონტალურად ცენტრში:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

იხილეთ აგრეთვე

თვისება background,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის