Ostatnio edytowany:

background-position

Autor: Virtual Patriot

Opis właściwości background-position

Za pomocą właściwości background-position możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości background-position

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
  • 0% 0%
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości background-position

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje wartość wzorzec oraz sekwencja, lecz od wersji "9".

Edge

tak

Opis wartości właściwości background-position

grupa wartości

Opis

Za pomocą właściwości background-position oraz z góry zdefiniowanej grupy wartości możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  background-position:30px 60px;
}

/* REGUŁA - 2 */
div {
  background-position-x:30px;
  background-position-y:60px;
}

Składniki grupy wartości właściwości background-position

Ważne

podana przez nas grupa wartości właściwości background-position nie może zawierać wartości globalnych

Przykładowe zapisy

right

right bottom

30px

30px -120px

-25% top

x

Składnik x jest wymaganym składnikiem grupy wartości właściwości background-position. Składnik x określa wartość właściwości background-position-x, czyli pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML (względem lewej krawędzi obszaru pozycjonowania).

Wartość domyślna

brak

y

Składnik y nie jest wymaganym składnikiem grupy wartości właściwości background-position. Składnik y określa wartość właściwości background-position-y, czyli pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML (względem górnej krawędzi obszaru pozycjonowania).

Wartość domyślna

center

Przykład

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej oraz dolnej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "right bottom"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        background-position:right bottom;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej oraz dolnej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "right bottom"
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości background-position oraz z góry zdefiniowanego wzorca wartości możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Składniki wzorca wartości właściwości background-position

Przykładowe zapisy

right 15px top

right 15px top 30px

top 30px right

top 30px right -15px

left -50% bottom 25%

edgeFirst

Składnik edgeFirst jest wymaganym składnikiem wzorca wartości właściwości background-position. Składnik edgeFirst wskazuje pierwszą krawędź obszaru pozycjonowania, względem której powinno dokonywać się obliczanie pozycji początkowej obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

pojedyncza wartość pozycjonująca (bez wartości center)

Sposób podawania

jeżeli zdecydowaliśmy się podać wartość left lub wartość right, wtedy dla składnika edgeSecond możemy podać tylko wartość top lub wartość bottom. Natomiast jeżeli zdecydowaliśmy się podać wartość top lub wartość bottom, wtedy dla składnika edgeSecond możemy podać tylko wartość left lub wartość right.

Wartość domyślna

brak

valueFirst

Składnik valueFirst jest wymaganym składnikiem wzorca wartości właściwości background-position. Składnik valueFirst określa pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML (względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeFirst).

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Wartości dodatnie

wartości dodatnie przesuwają obrazek tworzący tło obrazkowe w prawo (gdy wartością składnika edgeFirst jest wartość left), w lewo (gdy wartością składnika edgeFirst jest wartość right), w dół (gdy wartością składnika edgeFirst jest wartość top) lub w górę (gdy wartością składnika edgeFirst jest wartość bottom) względem wskazanej przez składnik edgeFirst krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają obrazek tworzący tło obrazkowe w lewo (gdy wartością składnika edgeFirst jest wartość left), w prawo (gdy wartością składnika edgeFirst jest wartość right), w górę (gdy wartością składnika edgeFirst jest wartość top) lub w dół (gdy wartością składnika edgeFirst jest wartość bottom) względem wskazanej przez składnik edgeFirst krawędzi obszaru pozycjonowania

Wartości procentowe

wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem szerokości obszaru pozycjonowania, a rozmiarem szerokości obrazka tworzącego tło obrazkowe, którego pozycję chcemy określić, lecz tylko w sytuacji, gdy wartością składnika edgeFirst jest wartość left lub wartość right, w przeciwnym wypadku wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem wysokości obszaru pozycjonowania, a rozmiarem wysokości obrazka tworzącego tło obrazkowe, którego pozycję chcemy określić

Wartość domyślna

brak

edgeSecond

Składnik edgeSecond jest wymaganym składnikiem wzorca wartości właściwości background-position. Składnik edgeSecond wskazuje drugą krawędź obszaru pozycjonowania, względem której powinno dokonywać się obliczanie pozycji początkowej obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

pojedyncza wartość pozycjonująca (bez wartości center)

Sposób podawania

jeżeli zdecydowaliśmy się podać wartość left lub wartość right, wtedy dla składnika edgeFirst możemy podać tylko wartość top lub wartość bottom. Natomiast jeżeli zdecydowaliśmy się podać wartość top lub wartość bottom, wtedy dla składnika edgeFirst możemy podać tylko wartość left lub wartość right.

Wartość domyślna

brak

valueSecond

Składnik valueSecond nie jest wymaganym składnikiem wzorca wartości właściwości background-position. Składnik valueSecond określa pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML (względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeSecond).

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Wartości dodatnie

wartości dodatnie przesuwają obrazek tworzący tło obrazkowe w prawo (gdy wartością składnika edgeSecond jest wartość left), w lewo (gdy wartością składnika edgeSecond jest wartość right), w dół (gdy wartością składnika edgeSecond jest wartość top) lub w górę (gdy wartością składnika edgeSecond jest wartość bottom) względem wskazanej przez składnik edgeSecond krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają obrazek tworzący tło obrazkowe w lewo (gdy wartością składnika edgeSecond jest wartość left), w prawo (gdy wartością składnika edgeSecond jest wartość right), w górę (gdy wartością składnika edgeSecond jest wartość top) lub w dół (gdy wartością składnika edgeSecond jest wartość bottom) względem wskazanej przez składnik edgeSecond krawędzi obszaru pozycjonowania

Wartości procentowe

wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem szerokości obszaru pozycjonowania, a rozmiarem szerokości obrazka tworzącego tło obrazkowe, którego pozycję chcemy określić, lecz tylko w sytuacji, gdy wartością składnika edgeSecond jest wartość left lub wartość right, w przeciwnym wypadku wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem wysokości obszaru pozycjonowania, a rozmiarem wysokości obrazka tworzącego tło obrazkowe, którego pozycję chcemy określić

Wartość domyślna

0

Przykład

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 15 pikseli od prawej krawędzi oraz 30 pikseli od górnej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "right 15px top 30px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        background-position:right 15px top 30px;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 15 pikseli od prawej krawędzi oraz 30 pikseli od górnej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "right 15px top 30px"
    </div>

  </body>
</html>

sekwencja wartości

Opis

Jeżeli zdecydowaliśmy się na to, aby tło interesującego nas elementu HTML składało się z kilku obrazków jednocześnie, wtedy za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) grup wartości lub wzorców wartości właściwości background-position możemy określić względem krawędzi obszaru pozycjonowania osobną pozycję początkową dla poszczególnych obrazków tworzących tło obrazkowe interesującego nas elementu HTML.

Jeżeli podana przez nas sekwencja wartości właściwości "background-position" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących tło obrazkowe elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-position" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy lewej oraz dolnej krawędzi obszaru pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div", natomiast pozycja początkowa drugiego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej oraz górnej krawędzi obszaru pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującą sekwencją wartości: "left bottom, right top"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(http://webkod.pl/files/css/obrazek-o1.png), url(http://webkod.pl/files/css/obrazek-o2.png);
        background-repeat:no-repeat, no-repeat;
        background-position:left bottom, right top;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy lewej oraz dolnej krawędzi obszaru pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div", natomiast pozycja początkowa drugiego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej oraz górnej krawędzi obszaru pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującą sekwencją wartości: "left bottom, right top"
    </div>

  </body>
</html>