css властивість background-size

Властивість background-size введена у CSS3 та дозволяє встановити розміри для фонового зображення елементу.

background-size дозволяє точно встановити потрібний розмір для фону. Ти також можеш використовувати ключові слова cover і contain для масштабування зображення зі збереженням пропорцій. Ця властивість може приймати одне, два значення або ключові слова. Якщо вказано одне значення в одиницях виміру

background-size: 200px;

то це буде розмір по горизонталі, розмір по вертикалі буде auto. Якщо ти вказуєш розміри за допомогою двох значень, перше значення задає горизонтальний розмір, друге - вертикальний.

Ключове слово cover повідомляє браузеру, що зображення мусить заповнювати весь контейнер, навіть якщо для цього потрібно його розтягнути або трохи обрізати з однієї зі сторін. contain, повідомляє, що завжди треба показувати увесь фон, навіть якщо це залишає вільний простір по боках.

Ключове слово без задання - auto - повідомляє браузеру автоматичний розрахунок розміру фонового зображення залежно від фактичного розміру зображення та співвідношення його сторін.

Ця властивість використовується разом з background-image для більш делікатного відображення тла елементу.

Цю властивість також можна використовувати у скороченому записі властивості background, наприклад:

background: url("background.png") 40% / cover lightblue round border-box;

При такому записі background-position й background-size потрібно розділити за допомогою символу слеша - / .

У випадку використання відразу декількох зображень у якості фону, ви можете конкретизувати кожне значення background-size написавши їх через кому.

Не рекомендується використовувати значення у пікселях, а також ключове слово auto для задання розмірів фону заданого за допомогою градієнту( gradient() ), тому що це неможливо у браузерах Firefox нижче 8-ї версії, а також у браузерах які не підтримують рендеринг сторінки як у Firefox 8, які не можуть визначити розмір фону, який вони мають змінювати.

Синтаксис

background-size: auto|length|cover|contain|initial|inherit;

auto

Без задання. Тло матиме натуральний розмір, такий, як у оригінальної картинки. Пропорції теж будуть ідентичними оригінальному зображенню.

Якщо розміри вказані одиницями вимірювання, то перше значення зарає горизонтальний розмір, друге - вертикальний. Якщо значення тільки одне, то воно задає горизонтальний розмір, при цьому друге значення буде дорівнювати значенню без задання - auto. При такому записі розмір обчислюється автоматично виходячи з пропорцій картинки та вказаної величини.

length

Задає розмір в будь-яких доступних для CSS одиницях

percentage

Задати розмір фонової картинки в процентах від ширини і висоти елемента

cover

Масштабує картинку так, щоб вона накрила собою весь блок зі збереженням пропорцій, так, щоб його ширина та висота дорівнювала ширині та висоті блок.

Картинка буде намагатися поміститися цілком, але це не завжди буде виходити, тому якась її частина буде обрізатися. При цьому блок завжди та повністю буде покритий картинкою.

contain

Масштабує картинку так, щоб вона цілком помістилася в блок із збереженням пропорцій. При цьому вона може зайняти або всю ширину, або всю висоту (залежить від пропорцій картинки і від розмірів елемента).

При цьому блок буде вкритий картинкою не цілком. Проте картинку завжди буде відображено повністю, хоч і в зменшеному варіанті). Масштаб при такій поведінці буде дорівнювати оригінальному.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

html {


  background: url(image.jpg);


  background-size: cover; 


}

Додаткові посилання