css WEB 作りたい

CSSで背景画像を複数重ねて表示する方法

CSSで背景画像を複数重ねて表示する方法

ホームページの制作中に1つのCSS要素に背景画像を複数枚重ねて表示したいなぁと思ったことはありませんか?

別のCSSに背景画像を分けて指定する方法もございますが、ソースコードの記述が煩雑になってしまいますよね。
CSS3から1つの要素に複数の背景を指定できるようになりました。
記述の仕方はいたってシンプルな2パターンです。

こちらでまとめてご紹介いたします。

透過PNG画像などの準備

まずは、重ねたい画像を用意します。
今回は空の写真を背景に、ロゴの透過PNG画像を重ねてみます。

CSSで背景画像を複数重ねて表示する方法の背景画像
背景画像
CSSで背景画像を複数重ねて表示する方法の上に重ねるロゴ画像
ロゴ画像(透過PNG)

透過PNG画像の作り方は下記の記事をご確認ください。

Photoshopでの透過PNG画像の作り方

透過PNG画像の作り方
【初心者向け】透過PNG(ピング)画像の作り方【Photoshop】

背景が透明な透過PNG画像の作り方をご説明します。画像加工編集ソフトPhotoshop(フォトショップ)を使用します。背景を透明にすることで、画像を重ねて配置することが可能になり、ホームページやブログ・WEB制作などで非常に便利です。

続きを見る

Photoshop不要!ブラウザでの透過PNG画像の作り方

簡単な透過pngの作り方
【初心者向け】透過PNG(ピング)画像の作り方【画像編集ソフト不要】

背景が透明な透過PNG画像の作り方をご説明します。画像加工編集ソフトは一切使わずWEBサービスを利用します。背景を透明にすることで、画像を重ねて配置することが可能になり、資料の作成やホームページ・ブログなどで非常に便利です。

続きを見る

CSSでの指定方法

背景画像、上に重ねる透過PNG画像の準備ができ任意のフォルダ(imgフォルダなど)に移動ができたら、CSSを使って指定していきます。

1.各画像ごとに指定する場合

まずは、各画像単位で指定していく方法です。
background:の後にURL()で画像のディレクトリ、半角スペースを空け、ポジション、半角スペース、リピートするかしないか、を順番に記述し、これを重ねたい画像の数だけ指定していきます。

この時、前に表示させたい画像の記述を先頭に持ってきます。








#bg_sora {
    background:
        url(logo.jpg) right center no-repeat,
        url(bg.jpg) center center no-repeat;
}

ソースコードはこちらです。
ポジションは前が左右の位置、後ろが上下の位置を指定します。
右揃えの上下センターなら「right center」、左上なら「left top」、上下左右のセンターなら「center center」、そして最後に繰り返し(リピート)表示するか否か、しない場合は「no-repeat」、左右にのみリピートする場合は「repeat-x」、上下にのみリピートする場合は「repeat-y」、上下左右にリピートする場合は「repeat」を記述します。

シンプルですよね!

意味合いは全く同じなのですが、好みによって書き方がもう1種類あります↓

2.要素ごとに指定する場合

先ほどのが画像ごとにしてするのに対して、今度はディレクトリ、ポジション、リピートと各要素ごとに記述していきます。

こちらも最前面に表示させたいものを最初に持ってきます。

#bg_sora {
    background-image:
        url(logo.jpg),
        url(bg.jpg);
    background-position:
        right center,
        center center;
    background-repeat:
        no-repeat,
        no-repeat;
}

どちらでもの書き方でも同じ表示になりますので、書き方は好みにもよります。
が、2の要素ごとに分けて記述する方が長くなってしまいますので、個人的にはオススメは1の画像ごとに指定する方法です。
ソースコードをスッキリさせておいたほうが、後から修正する際などに見つけやすいので、もし会社などで複数人で同じサイトを修正することがある場合は、記述の仕方を話し合って統一しておく事をおすすめします。

まとめ

いかがでしたでしょうか。
CSSで背景画像を複数枚重ねて表示する記述の仕方を2種類ご紹介いたしました。

知っていれば簡単に指定できるので、CSSを別に記述し<div>を入れ子にして記述するより、1つのCSSに背景画像を複数枚まとめて指定し、ソースコードの無駄を省き綺麗なサイトを心がけましょう。

今回は画像を2枚重ねましたが、3枚、4枚と数を増やして表示することも可能です。

CSSをHTMLに適用させる方法はこちらにまとめております。

あわせて読みたい!
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ

HTMLにCSSを適用する方法を3種類まとめました。最もポピュラーな方法や、各ページ単位でCSSを適用させる方法、イレギュラー対応時などの即効性のあるものまで、必要に応じてその方法を覚えておくと作業の効率が図れます。それぞれの適応範囲や優先順位も改めてご確認を!

続きを見る

-css, WEB, 作りたい
-, , , , ,

© 2021 ひゃくやっつ