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 Internet Explorer 9, Firefox 4, Opera, Chrome)
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,... }