Przejdź do treści

Tło - CSS

Rozmiary tła obrazkowego {background-size}

W jaki sposób przeskalować obrazek wstawiony w tle, tak żeby pasował idealnie?

(CSS 3 - interpretuje: Chrome 3, Firefox 4, Edge 12, Opera 10, Safari 5)

selektor { background-size: rozmiary }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiary" należy wpisać:
  • contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle
  • cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna)
  • auto - zachowanie domyślne
  • długość - obrazek zostanie przeskalowany do podanego wymiaru
  • wartość procentową - obrazek zostanie przeskalowany względem obszaru pozycjonowania tła
Podanie dwóch z powyższych wartości (np. "150px 100px") pozwala określić osobno szerokość i wysokość obrazka (skalowanie bez zachowania proporcji - rozciąganie grafiki). Aby przeskalować do wysokości, zachowując jego proporcje, jako szerokość należy podać wartość "auto" (np. "auto 100px").

Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony.

Możliwe jest również określenie kilku wartości rozmiary tła - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... }

Przykład {background-size}

contain
cover
75px 100px
100% 100%

Komentarze

Zobacz więcej komentarzy

Facebook