background-image

Властивість CSS background-image (зображення тла) встановлює одне або більше зображень тла елемента.

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

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

Межі елемента наносяться поверх зображень тла, а background-color – під їх сподом. Те, як зображення наносяться відносно рамок та їх меж, визначається властивостями CSS background-clip і background-origin.

Якщо певне зображення не може бути нанесено (наприклад, коли файл, вказаний через URI, не може бути завантажений), браузери обробляють таку ситуацію так, ніби вказано значення none.

[!NOTE] Навіть якщо зображення непрозорі, і колір тла не повинен з'явитися за звичайних умов, веброзробники мусять завжди вказувати background-color. Якщо зображення не можуть бути завантажені, – наприклад, коли мережа недоступна, – колір тла буде використаний як запасний варіант.

Синтаксис

/* одне зображення */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* кілька зображень */
background-image: radial-gradient(circle, #0000 45%, #000f 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

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

Кожне зображення тла вказується як ключове слово none або як значення <image>.

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

Значення

none

Ключове слово, що вказує на відсутність зображень.

<image>

Значення <image>, котре вказує зображення до нанесення. Може бути кілька зображень, розділених комами, оскільки підтримуються кілька фонів.

Доступність

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

• MDN Розуміння WCAG, пояснення Настанови 1.1
• Розуміння мірила успіху 1.1.1 | W3C Розуміння WCAG 2.0

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

Співвідношення колірного контрасту визначається шляхом порівняння яскравості (luminance) значень кольорів тексту і тла. Щоб відповідати вимогам Настанов із доступності вебвмісту (WCAG), потрібне співвідношення 4,5:1 для текстового вмісту тіла сторінки та 3:1 для більшого тексту, як-от заголовки. Великий текст визначається як 24px або більше, або жирний текст 18.66px або більше.

• WebAIM – Інструмент перевірки колірного контрасту
• MDN розуміння WCAG, пояснення Настанов 1.4
• Розуміння критерію успіху 1.4.3 | W3C Розуміння WCAG 2.0, W3C (2023)

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

{{cssinfo}}

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

<bg-image>#
де 
<bg-image> = none | <image>
де 
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
де 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>
де 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] [ <resolution> || type(<string>) ]
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<repeating-conic-gradient()> = repeating-conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
де 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
де 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
де 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Приклади

Нашарування зображень тла

Зверніть увагу на те, що зображення зірки частково прозоре і накладається на зображення кота.

HTML

<div>
  <p class="cats-and-stars">Цей параграф сповнений котів<br />та зірок.</p>
  <p>А цей – ні.</p>
  <p class="cats-and-stars">Ось іще коти для вас.<br />Погляньте на них!</p>
  <p>І – це все.</p>
</div>

CSS

p {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.cats-and-stars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

Результат

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

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

Дивіться також

• <img>

• Функції, пов'язані з зображеннями:

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • <url>

• Використання градієнтів CSS

• Реалізація спрайтових зображень за допомогою CSS

• Модуль Зображень CSS

• Властивості, пов'язані з фонами

  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • Скорочення background

• Вивчаймо CSS – Фони та межі

• Застосування кількох фонів

• Зміна розмірів фонових зображень

• Модуль Фонів і меж CSS