background-size

Властивість CSS background-size (розмір тла) задає розмір зображення тла елемента. Зображення може зберегти свій природний розмір, бути розтягнутим чи обмеженим для вміщення в доступний простір.

Спробуйте його в дії

Проміжки, не перекриті зображеннями тла, заповнені властивістю background-color, а також колір тла буде видимим крізь зображення тла, що мають прозорість чи напівпрозорість.

Синтаксис

/* Значення – ключові слова */
background-size: cover;
background-size: contain;

/* Синтаксис одного значення */
/* ширина зображення (висота стає 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Синтаксис двох значень */
/* перше значення – ширина зображення, друге значення – висота */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Декілька фонів */
background-size: auto, auto; /* Не плутати з `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Глобальні значення */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

Властивість background-size задається в один з наступних способів:

• За допомогою значень – ключових слів contain і cover.
• За допомогою виключно значення ширини, у випадку чого висота отримує усталене значення auto.
• За допомогою значень і ширини, і висоти, у випадку чого перше значення задає ширину, а друге – висоту. Кожне значення може бути <length>, <percentage> чи auto.

Щоб задати розмір кількох зображень тла, кожне зі значень слід відділити комою.

Значення

contain (вміщати)

Робить зображення настільки великим, наскільки можливо при тому, щоб воно вміщалось в контейнері без обрізання чи розтягування зображення. Якщо контейнер – більший за зображення, то це призведе до того, що зображення вкриє контейнер черепицею, якщо властивість background-repeat не має значення no-repeat.

cover (накриття)

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

auto (автоматично)

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

<length>

Розтягує зображення за відповідним розміром до вказаної величини. Від'ємні значення не дозволені.

<percentage>

Розтягує значення за відповідним розміром до вказаної величини у відсотках від області розташування тла. Область розташування тла визначається значенням background-origin (усталено це рамки внутрішніх полів). Проте якщо значення background-attachment – fixed, то область розташування – це вся область перегляду. Від'ємні значення не дозволені.

Природні розміри й пропорції

Обчислення значень залежить від природних розмірів зображення (ширини й висоти) й природних пропорцій

• Зображення – бітова карта (як то JPG) завжди має природні розміри та пропорції.
• Векторне зображення (як то SVG) не обов'язково має природні розміри. Якщо воно має і горизонтальний, і вертикальний природний розмір, то має і природні пропорції. Якщо воно не має розмірів або має лише один, то може мати, а може і не мати пропорцій.
• <gradient> CSS не має природних розмірів чи природних пропорцій.
• Зображення тла, створені за допомогою функції element(), використовують природні розміри та пропорції елемента, що їх породжує.

Примітка: У Gecko зображення тла, створене за допомогою функції element(), наразі обробляються як зображення, чиї розміри дорівнюють розмірам елемента або, якщо елемент – це SVG, то області розташування тла, з відповідною природною пропорцією. Це нестандартна поведінка.

Візуалізований розмір зображення тла обчислюється на основі природних розмірів та пропорцій, отак:

• Якщо задані обидві частини background-size, і вони не auto: Зображення тла візуалізується згідно з заданим розміром.

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

• Якщо background-size має значення auto чи auto auto:

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

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

  • Якщо зображення не має природних розмірів, але має природні пропорції, воно візуалізується так, ніби було задано contain.

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

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

  Примітка: Зображення SVG мають атрибут preserveAspectRatio, що має усталене значення contain; явна background-size призводить до ігнорування preserveAspectRatio.

• Якщо background-size містить одну частину auto, а іншу – не auto:

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

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

Формальне визначення

Формальний синтаксис

<bg-size>#
де 
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
де 
<length-percentage> = <length> | <percentage>

Приклади

Черепиця з великим зображенням

Припустімо, є велике зображення, з логотипом Firefox, з розмірами 2982x2808. Треба розкласти його чотирма плитками всередині елемента 300x300 пікселів. Щоб це зробити, можна застосувати background-size з фіксованим значенням – 150 пікселів.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Result

Більше прикладів у Зміні розміру зображень тла.

Специфікації

Сумісність із браузерами

See also

• Зміна розміру зображень тла
• Масштабування тла SVG
• object-fit