Rozmiary tła obrazkowego {background-size}
W jaki sposób przeskalować obrazek wstawiony w tle, tak żeby pasował idealnie?
CSS 3
selektor { background-size: rozmiary }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
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}
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-size: wartość | 3 2009-09-15 | 4 2011-03-22 | 12 2015-07-29 | 10 2009-09-01 | 5 2010-06-07 |
background-size: auto | 1 2008-12-11 | 3.6 2010-01-21 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
background-size: contain | 3 2009-09-15 | 3.6 2010-01-21 | 12 2015-07-29 | 10 2009-09-01 | 5 2010-06-07 |
background-size: cover | 3 2009-09-15 | 3.6 2010-01-21 | 12 2015-07-29 | 10 2009-09-01 | 5 2010-06-07 |