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
wyjątki initial
  • brak
animowanie
  • nie

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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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

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:#AFF;
      }
    </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>