background

Властивість-скорочення CSS background ("тло", "фон") встановлює усі властивості стилю тла за раз: колір, зображення, вихідне положення, розмір, метод повторення. Властивості-складові, не задані у складі скорочення background, отримують свої усталені значення.

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

Складові властивості

Ця властивість є скороченням наступних властивостей CSS:

Синтаксис

/* За допомогою <background-color> (значення кольору тла) */
background: green;

/* За допомогою <bg-image> (значення зображення тла) та <repeat-style> (значення стилю повторення) */
background: url("test.jpg") repeat-y;

/* За допомогою <box> (значення рамок) та <background-color> (значення кольору тла) */
background: border-box red;

/* Одне зображення, відцентроване та масштабоване */
background: no-repeat center/80% url("../img/image.png");

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

Властивість background вказується як перелік одного чи кількох шарів тла, відділених комами.

Синтаксис кожного шару – наступний

  • Кожний шар може містити нуль або більше входжень будь-якого із наступних значень:

    • <attachment> (прикріплення)
    • <bg-image> (зображення тла)
    • <position> (положення)
    • <bg-size> (розмір тла)
    • <repeat-style> (стиль повторення)
  • Значення <bg-size> може бути вказане лише відразу після <position>, відділене символом '/', ось так: "center/80%".

  • Значення <box> може бути вказано нуль, один або два рази. Якщо вказане раз, то воно встановлює як background-origin, так background-clip. Якщо вказано двічі, то перше входження встановлює background-origin, а друге – background-clip.

  • Значення <background-color> може бути вказане лише в останньому вказаному шарі.

Значення

<attachment> (прикріплення)

Дивіться background-attachment. Усталено – scroll.

<box> (рамки)

Дивіться background-clip та background-origin. Усталено – border-box і padding-box відповідно.

<background-color> (колір тла)

Дивіться background-color. Усталено – transparent.

<bg-image> (зображення тла)

Дивіться background-image. Усталено – none.

<position> (положення)

Дивіться background-position. Усталено – 0% 0%.

<repeat-style> (стиль повторення)

Дивіться background-repeat. Усталено – repeat.

<bg-size> (розмір тла)

Дивіться background-size. Усталено – auto.

Наступні три рядки CSS – рівносильні:

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

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

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

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

Початкове значеннятак як і всі інші властивості зі скорочення:
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:

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

[ <bg-layer> , ]* <final-bg-layer>

де
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <\'background-color\'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

де
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box

де
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

де
<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>
<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

<p class="topbanner">
  Зоряне небо<br />
  Мерехчи-мерехчи<br />
  Зоряне небо
</p>
<p class="warning">Ось – абзац</p>

CSS

.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
background
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
SVG image as background
Chrome Full support 1
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 9
Opera Full support 9.5
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Values of background-clip longhand
Chrome Full support 21
Edge Full support 12
Firefox Full support 22
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 5.1
WebView Android Full support 3
Chrome Android Full support 25
Firefox for Android Full support 22
Opera Android Full support 14
Safari on iOS Full support 4
Samsung Internet Full support 1.5
Values of background-origin longhand
Chrome Full support 21
Edge Full support 12
Firefox Full support 22
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 5.1
WebView Android Full support 3
Chrome Android Full support 25
Firefox for Android Full support 22
Opera Android Full support 14
Safari on iOS Full support 4
Samsung Internet Full support 1.5
Values of background-size longhand
Chrome Full support 21
Edge Full support 12
Firefox Full support 9
Internet Explorer Full support 9
Opera Full support 21
Safari Full support 5.1
WebView Android Full support 3
Chrome Android Full support 25
Firefox for Android Full support 18
Opera Android Full support 14
Safari on iOS Full support 4
Samsung Internet Full support 1.5
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 2
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

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