Çözüldü ChatGPT ve Bootstrap CSS ile istenilen şeyi yaptırmak

<div class="image-container">
    <div class="overlay">
      <div class="text-container">
        <h1>Başlık</h1>
        <p>Açıklama metni</p>
        <button type="button" class="btn btn-primary">Düğme</button>
      </div>

.image-container {
  margin: 400px 0;
  position: relative;
  width: 100%;
  height: auto;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(resim url);
}

.image-container .overlay {
  background: no-repeat;
  position: relative;
  width: 100%;
  height: 500px; /* Yüksekliği istediğiniz değeri burada ayarlayabilirsiniz */
}

.image-container .overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container .text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.image-container .text-container h1,
.image-container .text-container p,
.image-container .text-container button {
  margin-bottom: 10px;
}