Powtarzanie tła

3.1 Właściwość background-repeat

Właściwości background-repeat i background-size w CSS są używane do kontrolowania, jak obrazy tła są powtarzane i skalowane wewnątrz elementów. Te właściwości dają web-developerom elastyczne narzędzia do tworzenia wizualnie atrakcyjnych tł. Zobaczmy każdą z nich bardziej szczegółowo.

Właściwość background-repeat definiuje, jak obrazy tła są powtarzane w elemencie. Domyślnie obraz tła jest powtarzany zarówno poziomo, jak i pionowo.

Wartości

• repeat: obraz jest powtarzany poziomo i pionowo (domyślnie)
• repeat-x: obraz jest powtarzany tylko poziomo
• repeat-y: obraz jest powtarzany tylko pionowo
• no-repeat: obraz nie jest powtarzany

1. Wartość repeat:

Powtarza obraz poziomo i pionowo.

    
      .repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat">Powtarzanie poziomo i pionowo</div>
    
  

2. Wartość repeat-x:

Powtarza obraz poziomo.

    
      .repeat-x {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-x;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-x">Powtarzanie tylko poziomo</div>
    
  

3. Wartość repeat-y:

Powtarza obraz pionowo.

    
      .repeat-y {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-y;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-y">Powtarzanie tylko pionowo</div>
    
  

4. Wartość no-repeat:

Obraz nie jest powtarzany.

    
      .no-repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: no-repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="no-repeat">Bez powtarzania</div>
    
  

Wyjaśnienie kodu

• .repeat: obraz jest powtarzany poziomo i pionowo, wypełniając cały element
• .repeat-x: obraz jest powtarzany tylko poziomo
• .repeat-y: obraz jest powtarzany tylko pionowo
• .no-repeat: obraz nie jest powtarzany i wyświetlany tylko raz

3.2 Właściwość background-size

Właściwość background-size zarządza rozmiarem obrazu tła. Pozwala zmieniać rozmiar obrazu, żeby lepiej pasował do elementu.

Wartości:

• auto: rozmiar obrazu jest określany automatycznie (domyślnie)
• cover: obraz jest skalowany, aby całkowicie pokryć element, zachowując proporcje
• contain: obraz jest skalowany, aby całkowicie zmieścić się w elemencie, zachowując proporcje
• Wartości absolutne: na przykład, 100px 50px określają szerokość i wysokość obrazu w pikselach
• Wartości procentowe: na przykład, 50% 50% określają szerokość i wysokość obrazu w procentach od rozmiaru elementu

1. Rozmiar domyślny (auto):

Rozmiar obrazu jest określany automatycznie (domyślnie).

    
      .size-auto {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-size: auto;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-auto">Rozmiar domyślny (auto)</div>
    
  

2. cover:

Obraz jest skalowany, aby całkowicie pokryć element, zachowując proporcje.

    
      .size-cover {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-cover">Skalowanie do pokrycia elementu (cover)</div>
    
  

3. contain:

Obraz jest skalowany, aby całkowicie zmieścić się w elemencie, zachowując proporcje.

    
      .size-contain {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: contain;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-contain">Skalowanie do pełnego dopasowania (contain)</div>
    
  

4. Wartości absolutne:

Na przykład, 100px 50px określają szerokość i wysokość obrazu w pikselach.

    
      .size-pixels {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 100px 50px;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-pixels">Rozmiar w pikselach (100px 50px)</div>
    
  

5. Wartości procentowe:

Na przykład, 50% 50% określają szerokość i wysokość obrazu w procentach od rozmiaru elementu.

    
      .size-percent {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 50% 50%;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-percent">Rozmiar w procentach (50% 50%)</div>
    
  

Wyjaśnienie kodu:

• .size-auto: rozmiar obrazu jest określany automatycznie
• .size-cover: obraz jest skalowany, aby całkowicie pokryć element, zachowując proporcje. Części obrazu mogą być przycięte
• .size-contain: obraz jest skalowany, aby całkowicie zmieścić się w elemencie, zachowując proporcje. Obraz będzie całkowicie widoczny, ale mogą pojawić się puste obszary
• .size-pixels: rozmiar obrazu określony w pikselach (100px szerokości i 50px wysokości)
• .size-percent: rozmiar obrazu określony w procentach od rozmiaru elementu (50% szerokości i 50% wysokości)

3.3 Wspólne użycie background-repeat i background-size

Właściwości background-repeat i background-size są często używane razem, aby osiągnąć pożądany efekt wyświetlania obrazów tła.

Przykład użycia:

    
      .combined {
        width: 300px;
        height: 300px;
        background-image: url('https://via.placeholder.com/150');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <body>
        <div class="combined">Obraz tła nie powtarza się i skaluje się do pokrycia elementu</div>
      </body>
    
  

Wyjaśnienie kodu:

• background-repeat: no-repeat;: obraz nie jest powtarzany
• background-size: cover;: obraz jest skalowany, aby całkowicie pokryć element, zachowując proporcje. Części obrazu mogą być przycięte