background-size

Опис CSS властивості background-size:

Масштабує фонове зображення згідно заданих розмірах.

Синтаксис CSS властивості background-size:

background-size: [ <значення> | <проценти> | auto ]{1,2} | cover | contain

Аргументи CSS властивості background-size:

значення Задає розмір в будь-яких доступних для CSS одиницях - пікселі (px), сантиметри (cm), em та ін
відсотки Задає розмір фонової картинки у відсотках від ширини або висоти елемента.
auto Якщо задано одночасно для ширини і висоти (auto auto), розміри фону залишаються вихідними; якщо тільки для однієї сторони картинки (100px auto), то розмір розраховується автоматично, виходячи з пропорцій зображення.
cover Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку.
contain Масштабує зображення зі збереженням пропорцій таким чином, щоб картинка цілком помістилася всередину блоку.
Якщо встановлено одне значення, воно задає ширину фону, друге значення приймається за auto. Пропорції зображення при цьому зберігаються. Використання двох значень через пробіл задає ширину і висоту фонової картинки.

Значення по замовчуванні CSS властивості background-size:

auto

Наслідування CSS властивості background-size:

не наслідується

Приклад використання CSS властивості background-size:

div { height: 200px; border: 2px solid #000; background: url('images/mybg.png') 100% 100% no-repeat; background-size: cover; }

Використання CSS властивості background-size:

До блокових елементів.