Autor publikacji
Virtual Patriot - Administrator

background-size

Data publikacji
Ostatnio edytowano

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

Przeznaczenie właściwości background-size

Za pomocą właściwości background-size możemy określić rozmiar obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości background-size

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak, lecz nie wartość auto, cover oraz contain

Interpretacja właściwości background-size

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 background-size.

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

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości background-size.

Domyślnie obrazek tworzący tło obrazkowe elementu HTML posiada niezmieniony rozmiar.

Przykład

  background-size:auto;
obrazek tworzący tło obrazkowe tego elementu "div" posiada niezmieniony rozmiar

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

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" posiada niezmieniony rozmiar
    </div>

  </body>
</html>

cover

Wyjaśnienie

Za pomocą wartości cover właściwości background-size możemy sprawić, że rozmiar obrazka tworzącego tło obrazkowe interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania tego obrazka.

Przykład

  background-size:cover;
rozmiar obrazka tworzącego tło obrazkowe tego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z wartością "cover"

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

  <body>

    <div>
      rozmiar obrazka tworzącego tło obrazkowe tego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z wartością "cover"
    </div>

  </body>
</html>

contain

Wyjaśnienie

Za pomocą wartości contain właściwości background-size możemy sprawić, że rozmiar obrazka tworzącego tło obrazkowe interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania tego obrazka.

Przykład

  background-size:contain;
rozmiar obrazka tworzącego tło obrazkowe tego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z wartością "contain"

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

  <body>

    <div>
      rozmiar obrazka tworzącego tło obrazkowe tego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z wartością "contain"
    </div>

  </body>
</html>

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości background-size oraz z góry zdefiniowanego wzorca wartości możemy określić rozmiar obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Składniki wzorca wartości właściwości background-size

Przykładowe zapisy

50px

50px 100px

auto 100px

25%

25% 50%

width

Składnik width jest wymaganym składnikiem wzorca wartości właściwości background-size. Składnik width określa rozmiar szerokości obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto

Informacje dodatkowe

wartość auto oznacza, że gdy podamy wartość składnika height, wtedy rozmiar szerokości obrazka tworzącego tło obrazkowe zostanie przeskalowany przez przeglądarkę internetową w taki sposób, aby zachować prawidłowe proporcje pomiędzy rozmiarem szerokości, a rozmiarem podanej przez nas wartości wysokości, czyli wartości składnika height

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe, którego rozmiar chcemy określić

Wartość domyślna

brak

height

Składnik height nie jest wymaganym składnikiem wzorca wartości właściwości background-size. Składnik height określa rozmiar wysokości obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto

Informacje dodatkowe

wartość auto oznacza, że gdy podamy wartość składnika width, wtedy rozmiar wysokości obrazka tworzącego tło obrazkowe zostanie przeskalowany przez przeglądarkę internetową w taki sposób, aby zachować prawidłowe proporcje pomiędzy rozmiarem wysokości, a rozmiarem podanej przez nas wartości szerokości, czyli wartości składnika width

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru pozycjonowania obrazka tworzącego tło obrazkowe, którego rozmiar chcemy określić

Wartość domyślna

auto

Przykład

  background-size:200px 100px;
rozmiar szerokości obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 200 pikseli, natomiast rozmiar wysokości obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z następującymi wartościami: "200px 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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        background-size:200px 100px;
        border:15px solid rgba(0, 0, 0, 0.3);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 200 pikseli, natomiast rozmiar wysokości obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z następującymi wartościami: "200px 100px"
    </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 wartości należących do właściwości background-size możemy określić osobny rozmiar 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-size" nie może zawierać wartości globalnych.

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

Przykład

  background-size:150px 300px, 275px 125px;
rozmiar szerokości pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 150 pikseli, natomiast rozmiar wysokości pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 300 pikseli, ponadto rozmiar szerokości drugiego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 275 pikseli, natomiast rozmiar wysokości drugiego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 125 pikseli, ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z następującą sekwencją wartości: "150px 300px, 275px 125px"

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

  <body>

    <div>
      rozmiar szerokości pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 150 pikseli, natomiast rozmiar wysokości pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 300 pikseli, ponadto rozmiar szerokości drugiego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 275 pikseli, natomiast rozmiar wysokości drugiego obrazka tworzącego tło obrazkowe tego elementu "div" wynosi 125 pikseli, ponieważ do tego elementu "div" została dodana właściwość "background-size" wraz z następującą sekwencją wartości: "150px 300px, 275px 125px"
    </div>

  </body>
</html>