Ostatnio edytowany:

background-repeat

Autor: Virtual Patriot

Opis właściwości background-repeat

Za pomocą właściwości background-repeat możemy określić sposób powtarzania się obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

repeat

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości background-repeat

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje wartość round, space, wzorzec oraz sekwencja, lecz od wersji "9".

Edge

tak

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

repeat

Opis

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

Domyślnie obrazek tworzący tło obrazkowe elementu HTML powtarzany jest zarówno w poziomie, jak i w pionie.

Przykład

  background-repeat:repeat;
obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest zarówno w poziomie, jak i w pionie

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);
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest zarówno w poziomie, jak i w pionie
    </div>

  </body>
</html>

repeat-x

Opis

Za pomocą wartości repeat-x właściwości background-repeat możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML będzie powtarzany tylko w poziomie.

Przykład

  background-repeat:repeat-x;
obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest wyłącznie w poziomie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "repeat-x"

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:repeat-x;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest wyłącznie w poziomie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "repeat-x"
    </div>

  </body>
</html>

repeat-y

Opis

Za pomocą wartości repeat-y właściwości background-repeat możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML będzie powtarzany tylko w pionie.

Przykład

  background-repeat:repeat-y;
obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest wyłącznie w pionie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "repeat-y"

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:repeat-y;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest wyłącznie w pionie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "repeat-y"
    </div>

  </body>
</html>

no-repeat

Opis

Za pomocą wartości no-repeat właściwości background-repeat możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML nie będzie powtarzany.

Przykład

  background-repeat:no-repeat;
obrazek tworzący tło obrazkowe tego elementu "div" nie jest powtarzany, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "no-repeat"

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;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" nie jest powtarzany, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "no-repeat"
    </div>

  </body>
</html>

round

Opis

Za pomocą wartości round właściwości background-repeat możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML będzie powtarzany zarówno w poziomie, jak i w pionie oraz (jeżeli będzie to konieczne) zostanie on przeskalowany w taki sposób, aby wypełnić równomiernie w całości poszczególny rozmiar wspomnianego elementu HTML.

Przykład

  background-repeat:round;
obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "round"

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:round;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "round"
    </div>

  </body>
</html>

space

Opis

Za pomocą wartości space właściwości background-repeat możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML będzie powtarzany zarówno w poziomie, jak i w pionie oraz (jeżeli będzie to konieczne) zostanie on rozmieszczony (bez dodatkowego skalowania) w taki sposób, aby zmieścić się w całości w poszczególnym rozmiarze wspomnianego elementu HTML.

Przykład

  background-repeat:space;
obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest w stylu "space", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "space"

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:space;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" powtarzany jest w stylu "space", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z wartością "space"
    </div>

  </body>
</html>

wzorzec wartości

Opis

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

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

Przykładowe zapisy

round

round repeat

space round

no-repeat space

horizontal

Składnik horizontal jest wymaganym składnikiem wzorca wartości właściwości background-repeat. Składnik horizontal określa sposób powtarzania się w poziomie obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

wartości właściwości background-repeat (wyłącznie wartość repeat, no-repeat, round lub wartość space)

Wartość domyślna

brak

vertical

Składnik vertical nie jest wymaganym składnikiem wzorca wartości właściwości background-repeat. Składnik vertical określa sposób powtarzania się w pionie obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.

Dostępne wartości

wartości właściwości background-repeat (wyłącznie wartość repeat, no-repeat, round lub wartość space)

Wartość domyślna

wartość składnika horizontal

Przykład

  background-repeat:repeat round;
obrazek tworzący tło obrazkowe tego elementu "div" w poziomie powtarzany jest w stylu "repeat", natomiast w pionie powtarzany jest w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z następującymi wartościami: "repeat round"

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:repeat round;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek tworzący tło obrazkowe tego elementu "div" w poziomie powtarzany jest w stylu "repeat", natomiast w pionie powtarzany jest w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z następującymi wartościami: "repeat round"
    </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-repeat możemy określić osobny sposób powtarzania się 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-repeat" nie może zawierać wartości globalnych.

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

Przykład

  background-repeat:no-repeat, repeat;
pierwszy obrazek tworzący tło obrazkowe tego elementu "div" nie jest powtarzany, natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" jest powtarzany zarówno w poziomie, jak i w pionie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z następującą sekwencją wartości: "no-repeat, repeat"

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, repeat;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      pierwszy obrazek tworzący tło obrazkowe tego elementu "div" nie jest powtarzany, natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" jest powtarzany zarówno w poziomie, jak i w pionie, ponieważ do tego elementu "div" została dodana właściwość "background-repeat" wraz z następującą sekwencją wartości: "no-repeat, repeat"
    </div>

  </body>
</html>