Kurs HTML

Wprowadzenie: Skalowanie obrazu tła

Domyślnie obraz tła (background-image) jest wyświetlany w swoich oryginalnych wymiarach. Jeśli obraz jest mniejszy niż element, będzie powtarzany (chyba że zmieniono background-repeat). Jeśli jest większy, zostanie obcięty do granic elementu.

Właściwość background-size pozwala **kontrolować rozmiar obrazu tła**, umożliwiając jego skalowanie (powiększanie lub zmniejszanie), aby lepiej dopasować go do elementu.

Wartości background-size

Właściwość background-size może przyjmować różne wartości:

Słowa kluczowe

• auto: (Domyślne) Obraz jest wyświetlany w swoich oryginalnych wymiarach. Jeśli podano dwie wartości auto auto, obie osie zachowują oryginalny rozmiar. Jeśli podano jedną wartość auto, a drugą konkretną (np. background-size: 50px auto;), druga oś jest skalowana proporcjonalnie, aby zachować oryginalne proporcje obrazu.
• cover: Skaluje obraz tła (zachowując proporcje) tak, aby **całkowicie pokrył** obszar tła elementu. Jeśli proporcje obrazu nie pasują do proporcji elementu, część obrazu zostanie **obcięta**. Jest to często używane do tworzenia pełnoekranowych teł lub teł dla kontenerów, które mają zawsze być w pełni zakryte obrazem.
• contain: Skaluje obraz tła (zachowując proporcje) tak, aby **cały zmieścił się** wewnątrz obszaru tła elementu. Jeśli proporcje obrazu nie pasują do proporcji elementu, pozostaną puste przestrzenie po bokach lub na górze/dole elementu (w tych miejscach widoczny będzie background-color).

<div class="box size-example cover-example">cover</div>
<div class="box size-example contain-example">contain</div>
<div class="box size-example auto-example">auto (domyślne)</div>

.size-example {
  width: 200px;
  height: 150px;
  border: 1px solid black;
  margin-bottom: 10px;
  background-image: url('obraz-szeroki.jpg'); /* Zakładamy obraz szerszy niż wyższy */
  background-repeat: no-repeat; /* Ważne dla demonstracji rozmiaru */
  background-position: center; /* Wycentrujmy dla lepszego efektu */
  background-color: lightgray;
  color: white; text-shadow: 1px 1px 1px black; font-size: 1.5em; text-align: center; line-height: 150px;
}

.cover-example   { background-size: cover; }
.contain-example { background-size: contain; }
.auto-example    { background-size: auto; /* Obraz w oryginalnym rozmiarze, prawdopodobnie obcięty */ }

W przykładzie cover zapewni, że całe pudełko będzie zakryte obrazem (nawet kosztem obcięcia jego boków). contain zapewni, że cały obraz będzie widoczny (nawet jeśli powstaną puste paski na górze/dole). auto pokaże obraz w jego oryginalnym rozmiarze, wycentrowany, prawdopodobnie obcięty przez granice pudełka.

Wartości długości (px, em, %)

Można podać jedną lub dwie wartości, aby określić konkretny rozmiar tła:

• Jedna wartość: (np. background-size: 200px; lub background-size: 50%;) Określa **szerokość** obrazu tła. Wysokość jest ustawiana na auto, co oznacza, że jest skalowana proporcjonalnie, aby zachować oryginalne proporcje obrazu.
• Dwie wartości: (np. background-size: 100px 50px; lub background-size: 80% 60%;) Pierwsza wartość określa **szerokość**, a druga **wysokość** obrazu tła. Użycie dwóch konkretnych wartości może spowodować zniekształcenie (rozciągnięcie lub ściśnięcie) obrazu, jeśli podane proporcje różnią się od oryginalnych proporcji obrazu. Wartości procentowe odnoszą się do wymiarów obszaru pozycjonowania tła (domyślnie padding-box).

.size-pixels {
  /* Szerokość 150px, wysokość auto (proporcjonalnie) */
  background-size: 150px;
}

.size-percent {
  /* Szerokość 100% kontenera, wysokość auto (proporcjonalnie) */
  background-size: 100%; 
}

.size-fixed-distorted {
  /* Szerokość 100px, wysokość 80px - może zniekształcić obraz */
  background-size: 100px 80px;
}

.size-percent-both {
    /* Szerokość 50% kontenera, wysokość 75% kontenera - może zniekształcić */
    background-size: 50% 75%;
}

Rozmiar wielu obrazów tła

Podobnie jak w przypadku innych właściwości tła, jeśli używasz wielu obrazów, możesz podać wiele wartości dla background-size, oddzielonych przecinkami. Każda wartość odpowiada obrazowi na tej samej pozycji w background-image.

.multi-bg-sized {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-size: 50px, auto; /* logo ma 50px szerokości (wys. auto), wzór ma rozmiar auto (oryginalny) */
  /* Można też użyć cover/contain: */
  /* background-size: contain, cover; */
  border: 1px solid brown;
  height: 200px;
}