html･CSSで画像の上に文字を真ん中に重ねる方法(レスポンシブ対応)

ページトップにイメージ画像を置き、キャッチコピーやタイトル文字を重ねたいときありますよね。

CSSで画像の上に文字を重ねて中央や左下に置く方法を解説します。

もちろんレスポンシブ対応です。

レスポンシブ対応して画像の上に画像を載せる方法はこちら

【方法1】画像を背景にしflexで位置調整

<style>
.example{
    background: url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
    height: 300px;
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example">重ねたい文字</div>

画像の上に文字を重ねるために画像を背景にしたdivを用意しその中に文字を置いています。

背景画像は「background: url(○○) no-repeat center center / cover」と設定します。

url(○○)には画像のURLを記載します。相対パスの場合はそのCSSファイルを基準としたパスにしましょう。

no-repeatは1枚画像にするための設定です。

center centerは画像を中央寄せする設定です。背景画像という特徴上上下や左右が見切れます。見切れてもいい画像を用意しましょう。

coverは画像が見切れるときdivの縦横いっぱいに画像がはまっている状態にする設定です。

backgroundについて詳しくはこちら↓

heightを指定しないと文字の高さまでしかない状態になります。パソコンではpxで設定し、タブレット以下ではvwで設定するとよいでしょう。

vwはブラウザの幅を基準にする単位です。詳しくはこちら↓

上下左右中央寄せ

<style>
.example2{
    /*追加*/display: flex;
    /*追加*/justify-content: center;
    /*追加*/align-items: center;
    background: url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
    height: 300px;
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example2">重ねたい文字</div>

上下左右中央寄せするには次の3つのCSSを追加します。

display: flex;
justify-content: center;
align-items: center;

display: flexは子要素の位置調整をするCSSです。

justify-contentはflex内の子要素の横位置を調整するCSSです。

align-itemsは同じく縦位置を調整するCSSです。

display: flex関連CSSについて詳しくはこちら↓

左下寄せ

<style>
.example3{
    /*追加*/display: flex;
    /*追加*/justify-content: flex-start;
    /*追加*/align-items: flex-end;
    /*追加*/padding: 50px;
    /*追加*/box-sizing: border-box;
    background: url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
    height: 300px;
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example3">重ねたい文字</div>

上下左右中央寄せの方法と同様display: flexで左下に位置を調整します。

これだけだと左下にピタッとくっついてしまいデザイン上見づらくなります。

よってpaddingで左下から離します。

paddingを設定するとheightが変わってしまうためbox-sizing: border-boxで変わらないようします。

【方法2】imgにposition:absoluteで重ねる

<style>
.example4{
    position: relative;
}
.example4 img{
    width: 100%;
    height: auto;
}
.example4>div{
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <div>重ねたい文字</div>
</div>

「画像を見切らせたくない」「imgでどうにかやりたい」「flexでどうもうまくいかない」というときはimgにposition:absoluteで重ねましょう。

画像と文字をdivで囲みます。

親のdivにposition: relativeを設定し基準とします。

文字のdivにposition: absoluteを設定し画像に重なるようにします。あとはtopやleftで位置調整をします。

画像は位置調整をしないためpositionの設定は不要です。設定してしまうと文字が重ならないなどの無用なトラブルを引き起こします。

positionについて詳しくはこちら↓

backgroundの設定は不要です。

imgはwidth:100%で幅いっぱいになるようにしています。

height: autoで縦横比が崩れないようにします。

上下左右中央寄せ

<style>
.example5{
    position: relative;
}
.example5 img{
    width: 100%;
    height: auto;
}
.example5>div{
    position: absolute;
    left: 50%;
    top: 50%;
    /*コレ*/transform: translate(-50%,-50%);
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example5">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <div>重ねたい文字</div>
</div>

leftとtopを50%を指定します。しかしこれだけでは重ねたい文字の右上部分が中央になり文字全体としては ずれてしまいます。

「transform: translate(-50%,-50%)」を指定することでこのずれを戻し上下左右中央寄せができます。

左下寄せ

<style>
.example6{
    position: relative;
}
.example6 img{
    width: 100%;
    height: auto;
}
.example6>div{
    position: absolute;
    left: 10%;
    /*コレ*/bottom: 10%;
    color: #FFF;
    font-size: 200%;
    font-weight: bold;
}
</style>
<div class="example6">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <div>重ねたい文字</div>
</div>

左下に寄せたい場合はtopではなくbottomで設定しましょう。

うまくいかなかったときは下記もご覧ください。

【まとめ】

【方法1】画像を背景にしflexで位置調整

backgroundで画像背景を用意しdisplay:flexで文字位置を調整しましょう。

【方法2】imgにposition:absoluteで重ねる

imgと文字を兄弟要素に設定し、文字をposition:absoluteで画像にのるようにしましょう。

以上、CSSで画像の上に文字を重ねて中央や左下に置く方法(レスポンシブ対応)でした。