Ostatnio edytowany:

background-position-x

Autor: Virtual Patriot

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

Za pomocą właściwości background-position-x możemy określić względem lewej 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-x

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

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

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

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

rozmiar

Opis

Za pomocą właściwości background-position-x oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić względem lewej krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Wartości dodatnie

wartości dodatnie przesuwają obrazek tworzący tło obrazkowe w prawo względem lewej krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają obrazek tworzący tło obrazkowe w lewo względem lewej 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ć

Przykład

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 100 pikseli od lewej 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-x" wraz z wartością "100px"

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-x:100px;
        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ę 100 pikseli od lewej 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-x" wraz z wartością "100px"
    </div>

  </body>
</html>

left

Opis

Za pomocą wartości left właściwości background-position-x możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się przy lewej krawędzi obszaru pozycjonowania.

Przykład

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy lewej 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-x" wraz z wartością "left"

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-x:left;
        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 lewej 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-x" wraz z wartością "left"
    </div>

  </body>
</html>

center

Opis

Za pomocą wartości center właściwości background-position-x możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się na środku, względem lewej oraz prawej krawędzi obszaru pozycjonowania.

Przykład

pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się na środku, względem lewej oraz prawej 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-x" wraz z wartością "center"

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-x:center;
        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ę na środku, względem lewej oraz prawej 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-x" wraz z wartością "center"
    </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) wartości należących do właściwości background-position-x możemy określić względem lewej krawędzi obszaru pozycjonowania osobną pozycję początkową dla poszczególnych obrazków tworzących tło obrazkowe interesującego nas elementu HTML.

Podana przez nas sekwencja wartości właściwości "background-position-x" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "background-position-x" 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-x" 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 prawej 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ę 75 pikseli od lewej 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-x" wraz z następującą sekwencją wartości: "right, 75px"

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-x:right, 75px;
        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 prawej 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ę 75 pikseli od lewej 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-x" wraz z następującą sekwencją wartości: "right, 75px"
    </div>

  </body>
</html>