Właściwość background-position

Właściwość background-position ustawia położenie obrazka tła elementu. Położenie można ustawiać za pomocą dowolnych jednostek wymiaru. Pierwsza wartość oznacza odstęp z lewej strony, druga - odstęp od góry.

Można również ustawiać położenie słowami kluczowymi. W tym przypadku kolejność wartości nie ma znaczenia. Słowa kluczowe dla pionu: top, center, bottom. Słowa kluczowe dla poziomu: left, center, right.

Jak używać słów kluczowych

Aby umieścić obrazek za pomocą słowa kluczowego, trzeba podać jedną wartość dla pionu i jedną dla poziomu. Na przykład, jeśli podamy wartość top right, to obrazek znajdzie się u góry po prawej stronie.

Kolejność słów nie ma znaczenia: można napisać top right, a można - right top. Jeśli występuje słowo kluczowe center - można je pominąć. Na przykład, top center, to to samo co po prostu top. A center center to to samo co po prostu center.

Składnia

selektor {
	background-position: dwie wartości oddzielone spacją;
}

Przykład

Domyślnie obrazek tła będzie w górnym lewym rogu:

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

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

Przykład

Umieśćmy obrazek tła w górnym prawym rogu:

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

Przykład

Umieśćmy obrazek tła w dolnym prawym rogu:

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

Przykład

Umieśćmy obrazek tła po prawej stronie i wyśrodkujmy w pionie:

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

Przykład

Umieśćmy obrazek tła na środku bloku:

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

Przykład

Umieśćmy obrazek tła w odległości 20px z lewej strony i 40px od góry:

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

Przykład

Umieśćmy obrazek tła w odległości 90% z lewej strony i 100% od góry:

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

Przykład

Umieśćmy obrazek tła w odległości 30px z lewej strony i na dole w pionie:

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

Przykład

Umieśćmy obrazek tła w odległości 30px z lewej strony i wyśrodkujmy w pionie:

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

Przykład

Umieśćmy obrazek tła w odległości 30px od góry i wyśrodkujmy w poziomie:

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

Zobacz też

właściwość background,
która jest właściwością-skórtem dla tła