Как поставить картинку на фон

Короткий ответ

Укажите файл в background-image, а background-size: cover растянет его на весь блок без искажений:

<div style="height: 160px; background-image: url('/media/photo-800x500.jpg'); background-size: cover; background-position: center;"></div>

background-position: center выбирает, какая часть картинки останется видна, если она обрезается.

Короткая запись

Все свойства фона умещаются в одно background. Размер пишут через косую черту после позиции:

<div style="display: grid; place-items: center; height: 160px; background: steelblue url('/media/photo-800x500.jpg') center / cover no-repeat; color: white; font-size: 24px;">
  Spring sale
</div>

Цвет steelblue виден, пока картинка грузится или если она не загрузилась, — и белый текст при этом остаётся читаемым.

Узор из маленькой картинки

Без cover картинка повторяется по всему блоку. Размер плитки задаёт background-size:

<div style="height: 120px; background: url('/media/photo-200x200.jpg') 0 0 / 60px;"></div>

Когда фон, а когда img

Фоном делают украшение. Если картинка несёт смысл — фото товара, схема, портрет, — нужен <img> с alt: фон не виден программам чтения с экрана и поисковикам.

Частая ошибка

Задают фон пустому блоку без высоты и ничего не видят. У фона нет своего размера: <div> без содержимого имеет высоту 0, и картинку просто не на чем показать. Задайте height, min-height или aspect-ratio.