background-size
Оновлено: 08.12.2022
background-size
Масштабує фонове зображення, згідно із заданими розмірами.
Коротка інформація
| Значення за замовчуванням | auto |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
background-size: <bg-size> [, <bg-size> ]*
<bg-size> = [ <розмір> | <відсотки> | auto ]{1,2} | cover | contain
Значення
| <розмір> | Задає розмір у будь-яких доступних для CSS одиницях - пікселях (px), сантиметрах (cm), em тощо. |
| <відсотки> | Задає розмір фонової картинки у відсотках від ширини або висоти елемента. |
| auto | Якщо задано одночасно для ширини і висоти (auto auto), розміри фону залишаються вихідними; якщо тільки для одного боку картинки (100px auto), то розмір обчислюється автоматично виходячи з пропорцій картинки. |
| cover | Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку. |
| contain | Масштабує зображення зі збереженням пропорцій таким чином, щоб картинка цілком помістилася всередину блоку. |
Якщо встановлено одне значення, воно встановлює ширину фону, друге значення приймається за auto. Пропорції картинки при цьому зберігаються. Використання двох значень через пробіл задає ширину і висоту фонової картинки.
Приклад
Об'єктна модель
Об'єкт.style.backgroundSize
Примітка
Safari до версії 4.1, Chrome до версії 3.0 і Android використовує властивість -webkit-background-size.
Opera до версії 10.53 використовує властивість -o-background-size.
Firefox до версії 4 використовує властивістьо -moz-background-size.
Opera 9.5 некоректно встановлює положення фіксованого фону.