background

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

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

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

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

• background-attachment (прикріплення тла)
• background-clip (обрізання тла)
• background-color (колір тла)
• background-image (зображення тла)
• background-origin (вихідне положення тла)
• background-position (положення тла)
• background-repeat (метод повторення тла)
• background-size (розмір тла)

Синтаксис

/* За допомогою <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;

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

{{cssinfo}}

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

[ <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>

Доступність

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

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

Приклади

Встановлення фонів із ключовими словами кольорів та зображень

HTML

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

CSS

.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #99f repeat-y fixed;
}

Результат

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

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

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

• box-decoration-break (оздоблення розривів рамок)
• Використання градієнтів
• Використання кількох фонів