Autor publikacji: Virtual Patriot - Administrator

background-position

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - background-position property (LV3)

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `background-position`

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

Interpretacja właściwości `background-position`

tak

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

tak

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

grupa wartości

Wyjaśnienie

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`

x y

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 względem lewej krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

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 względem górnej krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Przykład

  background-position:right bottom;

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(https://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:#7DCDE8;
      }
    </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

Wyjaśnienie

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`

            edgeFirst valueFirst edgeSecond valueSecond

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 względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeFirst pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

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 względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeSecond pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

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

  background-position:right 15px top 30px;

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 15 pikseli na lewo od prawej krawędzi oraz 30 pikseli w dół 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(https://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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 15 pikseli na lewo od prawej krawędzi oraz 30 pikseli w dół 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

Wyjaśnienie

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

  background-position:left bottom, right top;

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(https://webkod.pl/files/css/obrazek-o1.png), url(https://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:#7DCDE8;
      }
    </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>