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, які не можуть визначити розмір фону, який вони мають змінювати.

правити

Порада

Safari до версії 4.1 і Chrome до версії 3.0 використовують нестандартну властивість -webkit-background-size. Opera до версії 10.53 використовує нестандартну властивість -o-background-size. Firefox до версії 4.0 використовує нестандартну властивість -moz-background-size.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість background-size може отримувати 7 значень:

auto

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

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

percentage

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

автор: Svitlana

правити

cover

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

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

автор: Svitlana

правити

contain

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

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
background-size	4.0	4.0	3.0	10.5	9.0

Підтримка: мобільні переглядачі

Переглядач
background-size	4.0	5.1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box cover">cover</div>
<div class="box contain">contain</div>

.box {
    display: inline-block;
    width: 180px;
    height: 100px;
    margin-right: 8px;
    border: 1px solid #999;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Crect width='60' height='40' fill='%2387ceeb'/%3E%3Ccircle cx='45' cy='12' r='7' fill='gold'/%3E%3Cpath d='M0 40L20 18l14 14 10-8 16 16z' fill='%232e7d32'/%3E%3C/svg%3E") no-repeat center;
}

.cover   { background-size: cover; }
.contain { background-size: contain; }