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

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

Przykład

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Zobacz też