Ostatnio edytowany:

background-origin

Autor: Virtual Patriot

Opis właściwości background-origin

Za pomocą właściwości background-origin możemy określić obszar pozycjonowania obrazka tworzącego tło obrazkowe interesującego nas elementu HTML. Mowa tu o obszarze między innymi względem którego określana jest pozycja początkowa obrazka tworzącego tło obrazkowe elementu HTML.

Gdy element HTML posiada właściwość background-attachment wraz z wartością fixed, wtedy obszarem pozycjonowania obrazka tworzącego tło obrazkowe elementu HTML jest obszar wyznaczony przez rozmiar okna przeglądarki internetowej.

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

przeznaczenie

element HTML każdego typu posiadający właściwość background-attachment wraz z wartością różną od wartości fixed

pozycja

dowolna

dziedziczenie

nie

wartość initial

padding-box

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości background-origin

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

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

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

padding-box

Opis

Wartość padding-box jest domyślną wartością właściwości background-origin.

Domyślnie obszarem pozycjonowania obrazka tworzącego tło obrazkowe elementu HTML jest obszar wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Przykład

  background-origin:padding-box;
obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"

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

  <body>

    <div>
      obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"
    </div>

  </body>
</html>

border-box

Opis

Za pomocą wartości border-box właściwości background-origin możemy sprawić, że obszarem pozycjonowania obrazka tworzącego tło obrazkowe interesującego nas elementu HTML będzie obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu HTML.

Przykład

  background-origin:border-box;
obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z wartością "border-box"

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

  <body>

    <div>
      obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z wartością "border-box"
    </div>

  </body>
</html>

content-box

Opis

Za pomocą wartości content-box właściwości background-origin możemy sprawić, że obszarem pozycjonowania obrazka tworzącego tło obrazkowe interesującego nas elementu HTML będzie obszar wyznaczony przez rozmiar obszaru zawartości tego elementu HTML.

Przykład

  background-origin:content-box;
obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z wartością "content-box"

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

  <body>

    <div>
      obszarem pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z wartością "content-box"
    </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-origin możemy określić osobny obszar pozycjonowania 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-origin" nie może zawierać wartości globalnych.

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

Przykład

  background-origin:border-box, content-box;
obszarem pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", natomiast obszarem pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z następującą sekwencją wartości: "border-box, content-box"

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

  <body>

    <div>
      obszarem pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez zewnętrzne krawędzie obramowania tego elementu "div", natomiast obszarem pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div" jest obszar wyznaczony przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-origin" wraz z następującą sekwencją wartości: "border-box, content-box"
    </div>

  </body>
</html>