Как поставить картинку фоном блока через background?

Для фона используйте не тег <img>, а CSS-свойство background — тогда поверх легко кладётся текст.

.hero {
  background-image: url('/img/bg.jpg');
  background-size: cover;       /* заполнить блок целиком */
  background-position: center;  /* центрировать картинку */
  background-repeat: no-repeat; /* не повторять плиткой */
  height: 400px;
  color: #fff;
}

<section class="hero">
  <h1>Текст поверх фона</h1>
</section>

Ключевые свойства:

• background-size: cover — картинка масштабируется так, чтобы полностью закрыть блок (края могут обрезаться). contain наоборот впишет целиком, оставив пустоты.
• background-position: center — какой участок виден при обрезке.
• no-repeat — иначе маленькая картинка размножится плиткой.
• блоку нужна высота, иначе фону негде показаться.

Часто текст плохо читается на пёстром фото. Наложите затемнение прямо в background через градиент:

background:
  linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
  url('/img/bg.jpg') center/cover no-repeat;

В последней строке — сокращённая запись всех свойств сразу. Полупрозрачный чёрный слой делает белый текст читаемым.