фон

Это свойство является сокращённой записью следующих свойств CSS:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

/* Global values */
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;

background = 
  <bg-layer>#? , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    

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

<bg-image> = 
  <image>  |
  none     

<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 [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<background-color> = 
  <color>  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Браузеры не предоставляют никакой специальной информации об изображениях фона для вспомогательных технологий. Это важно в первую очередь для программ чтения с экрана, так как программа чтения с экрана не будет объявлять о её присутствии и, следовательно, ничего не сообщит своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

• MDN Понимание WCAG, объяснения к Руководству 1.1
• Понимание успеха Критерия 1.1.1 | W3C Понимание WCAG 2.0

HTML

<p class="top-banner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>

CSS

.warning {
  background: pink;
}

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

Результат

• box-decoration-break
• Использование градиентов
• Использование нескольких фонов