画像の上に文字を適切な位置に配置させたい

Question

前提・実現したいこと

SP版レスポンシブWebサイトにて、画像上に文字を配置させたく調べながら試みましたが、配置が上手く反映されませんでした。

1. 文字を重ねた画像を真ん中揃いにしたい。
2. 白枠内の文字をはみ出さずに収めたい。
3. 画像を以下希望のサイズにしたい。 (現状以下サイズになっているものの画像はそれ以下で収まってしまっている。)

画像箇所は 327px x 340px
白い文字後ろの箇所は 260px x 130px を予定しております。

以下左画像がカンプデザインと右が実際の結果になります。

該当のソースコード

3つのリストを対象にしておりますが、一部抜粋して記載しております。

  <section class="section-menu">
    <h2 id="interests">Interests</h2>
    <ul>
      <div class="section-interests__image">
      <li>
       <div class="section-interests__image-top-description">
        <h3 class="section-interests__item-title">Photography</h3>
        <p class="section-interests__item-description"> Test Test Test Test Test Test Test <br>
           Test Test Test Test Test Test Test
        </p>
       </div>
      </li>
   </div>
 </ul>
  </section>

.section-menu ul li {
  margin: 0 24px;
  list-style: none;
}
.section-menu ul li {
  width: 270px;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 20px;
  text-align: left;
}
.section-interests__image {
  background-image: url("../images/common/interest_camera.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 340px;
  width: 327px;
  object-fit: cover;
  position: relative
}
.section-interests__image-top-description {
  position: absolute;
  width: 270px;
  height: 130px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  bottom: 0;
  box-sizing: border-box;
}

利用環境

Dreamweaver 2021

試したこと

親要素 (Div)に position: relative
子要素に absoluteを追加して margin: 0 auto;
を試しましたが真ん中に寄らず左に寄ってしまう。

1. box-sizing: border-box;

を使用したが収まらなかった。

1. background-size: 100%;

にしても一杯に表示されなかった。

以上になりますが、どうぞよろしくお願いいたします。

Answer 1

background-size: cover;にすればいいでしょう。

.section-interests__image {
  background-image: url("https://picsum.photos/340/327");
  background-size: cover; /* 背景画像をボックスサイズ一杯に表示する */
  background-repeat: no-repeat;
  height: 340px;
  width: 327px;
 /* object-fit: cover; img要素に指定するものなので無意味 */
  position: relative
}

Comments

[michael_y]

hatena19さん、ご回答ありがとうございます！
background-size: cover; を用いることで画面いっぱいに表示することが出来ました。
その他諸々、微調整することで無事希望通りに実装することが出来ました。