Как мне разместить этот текст над моим изображением?

Question

Это - это то, что я пытаюсь воссоздать.

Это то, что я пока имею для HTML:

.carousel-cell {
  position: relative;
}

.board-text {
  position: absolute;
  top: 50%;
}

<div class="carousel-cell">
  <img src="img/board1.png" alt="">
  <div class="board-text">
    <h4>Funboards</h4>
    <h2>Chilli Rare Bird</h2>
    <h3>$890</h3>
    <p>Buy</p>
  </div>
</div>

Answer 1

Я думаю, вы ищете это

.carousel-cell {
  position: relative;
}
.carousel-cell img{
  width:600px;
}
.board-text {
  position: absolute;
  top: 50%;
  transform:translate(0,-50%);
  left:420px;
}

Answer 2

Нет способа поместить текст поверх <img>, но вы можете создать прямоугольник, а затем дать ему изображение в виде background-image. Затем вы можете написать текст, который вы хотите в поле. HTML пример: <div id="imageBox">Your text</div> CSS: #imageBox{background-image: url(img/board1.jpg)} Надеюсь, это поможет;)