background-image

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

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

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

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

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

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

Синтаксис

background-image: linear-gradient(
    to bottom,
    rgb(255 255 0 / 50%),
    rgb(0 0 255 / 50%)
  ), url("catfront.png");

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

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

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

Значення

none

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

<image>

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

Занепокоєння щодо доступності

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

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

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

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

CSS

p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

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

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.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 No
Edge No support No
Firefox Full support 4
prefix
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android Full support 4
prefix
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
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()
Non-standard
Chrome No support No
Edge No support No
Firefox Full support 4
prefix
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android Full support 4
prefix
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
image-set() Chrome Full support 21
prefix
Edge Full support 79
prefix
Firefox No support No
footnote
Internet Explorer No support No
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 No
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

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