【CSS/html】画像の上に画像を重ねる方法【レスポンシブ対応】

htmlやCSSで要素を重ねるというのは少し難しいものです。

画像の上に画像を重ねる方法を3つ紹介します。

レスポンシブ対応もしています。

position:absoluteで重ねる

position:absoluteを使うと要素を重ねることができます。

ブラウザ幅を狭めてみてください。レスポンシブ対応していおり、画像の比率を保ったまま小さくなります。

<style>
.example{
    position: relative;
    display: inline-block;
}
.example img{
    display: block;
    max-width: 100%;
    height: auto;
}
.example img:nth-of-type(2){
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 50%;
    height: auto;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="">
</div>

divの中にimgが2つある状態です。

1つめが下になるほう、2つめが上に重なるほうです。

まずdivにはposition: relativeを指定します。これは重ねる画像の基準位置とさせるためです。

さらにdisplay: inline-blockを指定しています。これはdivの横幅を1つめのimgと同じにするためです。

次にimgにdisplay: blockを指定します。これはimgの下の空白を消すためです。下の空白が邪魔にならないならdisplay: blockは不要です。

最後に2つめのimgにposition: absoluteを指定します。さらにtopやleft、right、bottomで位置を調整します。レスポンシブ対応するために%で指定しましょう。

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

画像のサイズについて、大きいほうに「max-width: 100%」を指定して横幅を超えないようにしましょう。

小さい方には「width: 50%」のように大きい方の比率を指定します。

画像に「height: auto」を指定すると横幅に応じて画像の比率を保って高さを変えてくれます。

backgroundで重ねる

backgroundは2つ以上指定することができ、重ねることができます。

<style>
.example2{
    width: 100%;
    padding-top: 56%;
    background: 
        url(https://csshtml.work/wp-content/uploads/2.jpg) no-repeat bottom right / 50% auto,
        url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
}
</style>
<div class="example2"></div>

backgroundで2つ以上の画像を指定するときは「,」で区切ります。先に記述した方が前面に、後に記述した方が後方になります。

大きい方の画像のbackground-sizeは「cover」にしましょう。

これは縦横に合わせて空白がないように広がります。

小さい方は「50% auto」や「auto 50%」のように横幅や縦幅の比率を%で指定しましょう。

「横 縦」の順で指定します。一方を数値に一方をautoにすると、autoは数値に従って画像比率を保った大きさになります。

backgroundの基本はこちら↓

画像の高さを指定したいところですが、imgのようにheight:autoを指定しても高さは0になってしまいます。

そこで「padding-top（またはpadding-bottm）」です。

paddingを%指定したとき横幅を基準とします。よって「padding-top: 56%」と指定すると横幅の56%分上の空白を作ってくれます。これが実質高さとなります。

ちなみに16:9の写真なら9÷16×100%=56.25%です。

重なった画像を作る

重ねた画像をずらす予定がないならムリにCSSを使わず、最初から重なった画像を用意するのも手です。

画像編集ソフトの利用が苦手なら、PowerPointで重ねて画面キャプチャし、画像編集ソフトで切り抜きだけするでもいいでしょう。

1つの画像になっているため画像を拡縮すると重ねた画像も同じ比率、同じ場所で拡縮してくれるのもメリットです。

【まとめ】画像の上に画像を重ねる方法

position:absoluteで重ねる

position:absoluteを使うと要素を重ねることができます。

backgroundで重ねる

backgroundで2つ以上の画像を指定するときは「,」で区切ります。先に記述した方が前面に、後に記述した方が後方になります。

重なった画像を作る

重ねた画像をずらす予定がないならムリにCSSを使わず、最初から重なった画像を用意するのも手です。

以上、レスポンシブにも対応した、画像の上に画像を重ねる方法でした。