Текст поверх картинки CSS

Для того, чтобы сделать текст поверх картинки можно поместить его в div, и добавить свойство background-image. Чтобы текст располагался по центру можно использовать text-align со значением center и применить его к тегу p, либо использовать свойства Flexbox CSS для div, как показано на примере.

Пример

Lorem Ipsum

HTML


<div class="text-ex-image">
  <p>Lorem Ipsum</p>
</div>

CSS


.text-ex-image{
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat; /* Фон не повторяется */
  background-size: cover; /* Растягиваем  фон по высоте и ширине */
  background-position: center; /* Позиция фона по центру */
  height: 250px; /* Высота блока */
}