Ostatnio edytowany:

background-position-y

Autor: Virtual Patriot

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

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

0%

wyjątki initial

brak

animowanie

tak

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

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-y

rozmiar

Opis

Za pomocą właściwości background-position-y oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić względem górnej 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 dół względem górnej krawędzi obszaru pozycjonowania

Wartości ujemne

wartości ujemne przesuwają obrazek tworzący tło obrazkowe w górę względem górnej krawędzi obszaru pozycjonowania

Wartości procentowe

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ć

Przykład

  background-position-y:25px;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 25 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-y" wraz z wartością "25px"

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-y:25px;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

top

Opis

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

Przykład

  background-position-y:top;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy 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-y" wraz z wartością "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-01.png);
        background-repeat:no-repeat;
        background-position-y:top;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

center

Opis

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

Przykład

  background-position-y:center;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się na środku, względem górnej 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-y" 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-y:center;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

bottom

Opis

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

Przykład

  background-position-y:bottom;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy 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-y" wraz z wartością "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-y:bottom;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy 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-y" wraz z wartością "bottom"
    </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-y możemy określić względem górnej 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-y" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "background-position-y" 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-y" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  background-position-y:bottom, 25px;
pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy 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ę 25 pikseli w dół od 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-y" wraz z następującą sekwencją wartości "bottom, 25px"

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-y:bottom, 25px;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy 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ę 25 pikseli w dół od 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-y" wraz z następującą sekwencją wartości "bottom, 25px"
    </div>

  </body>
</html>