Autor publikacji
Virtual Patriot - Administrator

background-position

Data publikacji
Ostatnio edytowano

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.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje 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

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

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

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.

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.

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.

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.

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

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

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