1. Абсолютна зміна розміру
2. Відносне зміна розміру через відсотки
3. Масштабування до максимального розміру
4. заповнення фоном
5. Масштабування кількох фонів
6. Робота в браузерах

оригінал: sitepoint.com/css3-background-size-property

Переклад: Влад Мержевіч

В CSS 2.1 фонова картинка, що застосовується до контейнера, зберігає свої фіксовані розміри. На щастя, в CSS3 введено властивість background-size, за допомогою якого фон може бути розтягнутий або стиснутий. Воно ідеально підходить, якщо ви створюєте шаблон для адаптивного веб-дизайну.

Є кілька способів визначення розмірів - погляньте на демонстраційну сторінку background-size .

Абсолютна зміна розміру

Можуть застосовуватися одиниці виміру.

background-size: ширина висота;

За замовчуванням ширина і висота встановлена ​​як auto, що залишає вихідні розміри зображення.

Ви можете задати новий розмір зображення за допомогою абсолютних одиниць вимірювання, таких як px, em, cm і ін. Пропорції зміняться, якщо це необхідно. Наприклад, якщо наша фонова картинка має розміри 200 × 200 пікселів, то наступний код залишить цю висоту, але зробить ширину в два рази менше:

background-size: 100px 200px;

Якщо вказано тільки одне значення, воно вважається шириною. Висота встановлюється як auto і зберігаються пропорції:

background-size: 100px; / * Аналогічно * / background-size: 100px auto;

Даний код масштабує зображення з 200 × 200 до 100 × 100 пікселів.

Відносне зміна розміру через відсотки

Якщо застосовуються відсотки, розміри грунтуються на елементі, а НЕ зображенні:

background-size: 50% auto;

Ширина фонового зображення, таким чином, залежить від розмірів контейнера. Якщо у контейнера ширина 500px, то розмір нашого зображення зменшиться до 250 × 250.

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

Масштабування до максимального розміру

Властивість background-size також розуміє ключове слово contain. Воно встановлює масштаб зображення таким чином, щоб воно заповнювало контейнер. Іншими словами, зображення буде збільшуватися або зменшуватися пропорційно, але ширина і висота не перевищуватимуть розміри контейнера:

background-size: contain;

заповнення фоном

Властивість background-size також розуміє ключове слово cover. Зображення буде масштабироваться так, щоб заповнити весь контейнер, але якщо розрізняються співвідношення сторін, то картинка буде обрізана.

background-size: cover;

Масштабування кількох фонів

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

background: url ( "sheep.png") 60% 90% no-repeat, url ( "sheep.png") 40% 50% no-repeat, url ( "sheep.png") 10% 20% no-repeat # 393; background-size: 240px 210px, auto, 150px;

Робота в браузерах

Останні версії всіх браузерів підтримують background-size без префіксів.

IE8 і нижче не підтримують цю властивість. Ви можете використовувати фільтр IE для емуляції значень content і cover , Але неможливо змінити розмір фонової картинки без допомоги прийомів, на зразок додавання справжньою картинки позаду інших елементів. Це брудно, так що я рекомендую витончену деградацію.

Перегляд демонстраційна сторінка з background-size .