фон-изображение

Фоновые изображения отображаются на слоях контекста стека друг над другом. Первый заданный слой отображается как если бы он был ближе к пользователю.

Затем границы элемента отображаются поверх них, а background-color отображается под ними. Способ отображения изображений относительно области и её границ определяется свойствами CSS background-clip и background-origin.

Если заданное изображение не может быть отображено (например, когда файл, указанный URI, не может быть загружен), браузеры обрабатывают его так же, как и значение none.

/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* multiple images */
background-image: radial-gradient(circle, #0000 45%, #000f 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

Каждое фоновое изображение задаётся либо ключевым словом none , либо значением <image>.

Для задания нескольких фоновых изображений укажите несколько значений, разделённых запятыми.

none

Это ключевое слово, обозначающее отсутствие изображений.

<image>

Это значение <image>, обозначающее изображение для отображения. Может быть несколько изображений, разделённых запятыми, так как поддерживаются множественные фоны.

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

• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

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

Отношение контрастности цвета определяется путем сравнения яркости значений цвета текста и фона. Для соответствия Руководствам по доступности веб-контента (WCAG) требуется отношение 4.5:1 для основного текста и 3:1 для крупного текста, такого как заголовки. Крупный текст определяется как 24px или больше, или жирным шрифтом 18.66px или больше.

• WebAIM: Проверка контрастности цветов
• Understanding WCAG, Guideline 1.4 explanation
• Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0, W3C (2023)

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>       |
  <gradient>  

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

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

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

Обратите внимание, что изображение звезды частично прозрачное и наложено поверх изображения кошки.

HTML

<div>
  <p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</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;
}

Результат

• <img>

• Функции, связанные с изображениями:

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • <url>

• Использование CSS-градиентов

• Реализация спрайтов изображений в CSS

• Модуль CSS изображения

• Свойства, связанные с фоном

  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background сокращенная запись

• Учебник по CSS: фоны и границы

• Использование нескольких фонов

• Изменение размера фоновых изображений

• Модуль CSS фонов и границ