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>, котре вказує зображення до нанесення. Може бути кілька зображень, розділених комами, оскільки підтримуються кілька фонів.

Доступність

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

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

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

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

{{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;
}

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
background-image
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
footnote
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
element() Chrome No support Ні
Edge No support Ні
Firefox Full support 4
prefix
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 4
prefix
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
Gradients Chrome Full support 1
footnote
Edge Full support 12
Firefox Full support 3.6
footnote
Internet Explorer Full support 10
Opera Full support 11
footnote
Safari Full support 4
footnote
WebView Android Full support 37
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 4
footnote
Opera Android Full support 14
footnote
Safari on iOS Full support 3.2
footnote
Samsung Internet Full support 1.0
footnote
image-rect()
Нестандартне
Chrome No support Ні
Edge No support Ні
Firefox Full support 4
prefix
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 4
prefix
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
image-set() Chrome Full support 21
prefix
Edge Full support 79
prefix
Firefox No support Ні
footnote
Internet Explorer No support Ні
Opera Full support 15
prefix
Safari Partial support 6
prefix footnote
WebView Android Full support 4.4
prefix
Chrome Android Full support 25
prefix
Firefox for Android No support Ні
footnote
Opera Android Full support 14
prefix
Safari on iOS Partial support 6
prefix footnote
Samsung Internet Full support 1.5
prefix
Multiple backgrounds
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.6
Internet Explorer Full support 9
Opera Full support 10.5
Safari Full support 1.3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
SVG images
Chrome Full support 8
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 9
Opera Full support 9.5
Safari Full support 5
footnote
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 5
footnote
Samsung Internet Full support 1.0

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