Autor publikacji: Virtual Patriot - Administrator

background-repeat

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

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

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `background-repeat`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: repeat
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `background-repeat`

tak

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

tak

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

repeat

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:repeat-x;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:repeat-y;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:round;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:space;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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`

            horizontal vertical

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.

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.

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(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:repeat round;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

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-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(https://webkod.pl/files/css/obrazek-o1.png), url(https://webkod.pl/files/css/obrazek-o2.png);
        background-repeat:no-repeat, repeat;
        min-height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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>