Własność CSS background-size

Własność CSS background-size ustawia rozmiary obrazów tła elementu. Jeśli obraz tła nie przykrywa całego obszaru tła, to widoczny jest kolor tła (pod warunkiem, że został ustawiony).

Wartości i składnia

Własność CSS background-size obsługuje dwa rodzaje składni – pojedynczą i podwójną. W obu przyjmuje trzy typy wartości: słowa kluczowe, liczby z jednostką długości oraz wartości procentowe.

Składnia pojedyncza

W składni pojedynczej własność background-size przyjmuje następujące słowa kluczowe:

• auto: pojedyncze słowo kluczowe auto oznacza, że mają zostać użyte wymiary naturalne obrazu. Jeśli grafika nie ma wymiarów naturalnych (jest np. gradientem CSS), to jej rozmiar jest określany tak, jak przy użyciu słowa kluczowego contain.
• contain: skaluje obraz do maksymalnego rozmiaru mieszczącego się w dostępnym obszarze tła przy zachowaniu jego naturalnych proporcji (jeśli je ma), np.:

  div {
    width: 200px;
    height: 150px;
    background-image: url(filizanka.png);
    background-repeat: no-repeat;
    border: 1px solid black;
    background-size: contain;
  }

  Efekt:

  
• cover: skaluje obraz w taki sposób, aby wypełniał dostępną przestrzeń tła w poziomie i w pionie, ale przy zachowaniu proporcji. W efekcie grafika w tle może ulec znacznemu powiększeniu, jak widać w poniższym przykładzie, w którym wykorzystano poprzednią regułę, ale zmieniono w niej wartość własności background-size:

  background-size: cover;

  Efekt:

  

Ponadto w składni pojedynczej można używać także liczb z jednostką długości i wartości procentowych. W takim przypadku określają one szerokość obrazu w tle, a jego wysokość jest obliczana proporcjonalnie – domyślnie zostaje użyta wartość auto. Dlatego pojedyncze słowo kluczowe auto to tak naprawdę skrócona forma zapisu auto auto.

Wartość procentowa odnosi się do obszaru pozycjonowania tła, czyli do obszaru w tle, w obrębie którego można określać położenie obrazu.

Składnia podwójna

W składni podwójnej można używać tych samych wartości, co w pojedynczej, z wyjątkiem słów kluczowych contain i cover. W tym przypadku pierwsza wartość określa szerokość, a druga – wysokość obrazu w tle, np.:

background-size: 130px 50px;

Gdybyśmy tę deklarację wstawili do poprzedniej reguły w miejsce obecnej, to otrzymalibyśmy następujący efekt:

Możemy też procentowo określić wymiary naszego obrazu w tle, np.:

background-size: 80% 70%;

Efekt:

Kilka obrazów w tle

Należy pamiętać, że za pomocą własności background-image w tle elementu można ustawić kilka obrazów, w związku z czym własność background-size może mieć kilka wartości, każda odnosząca się do jednego ze wstawionych obrazów.

Spójrz na dwa poniższe przykłady:

background-size: 20px 10px;
background-size: 20px, 10px 30px;

Pierwsza deklaracja odnosi się tylko do jednego obrazu tła oraz ustawia jego szerokość na 20 pikseli i wysokość na 10 pikseli.

Z kolei druga z tych deklaracji odnosi się do dwóch obrazów tła. Pierwsza ustawia szerokość pierwszego obrazu na 20 pikseli a jego wysokość na auto, natomiast druga ustawia szerokość drugiego obrazu tła na 10 pikseli i jego wysokość na 30 pikseli.

Zastosowanie

Własność CSS background-size ma zastosowanie do wszystkich elementów HTML.

Podsumowanie