WEB 作りたい

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

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

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

背景画像ごとにCSSを分けて指定する方法もございますが、ソースコードの記述が重複してしまい複雑になってしまいます。

CSS3から1つの要素に複数の背景を指定できるようになりました。その記述の方法を2パターンご紹介したいと思います。

透過PNG画像などの準備

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

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

透過PNG画像の作り方は下記の記事をご確認ください。いろんな方法での作成方法を紹介しています。

あわせて読みたい!
透過PNG画像の作り方をまとめてご紹介
資料作成に便利な「透過PNG」とは?作り方・保存方法をまとめてご紹介

続きを見る

CSSで背景画像の指定

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

パターン1:各画像ごとに指定する場合

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

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








CSSの記述がこちらです。

 css
#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:要素ごとに指定する場合

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

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

 css
#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種類まとめ

続きを見る

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」がオススメ!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

¥2,838 (2024/05/19 19:26時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】

WEB

2024/1/3

【簡単レスポンシブ】PCとスマホで画像を切り替える方法...

【初心者向け】CSSで背景画像だけを回転させる方法を紹介!他の応用技も

WEB

2023/12/23

【初心者向け】CSSで背景画像だけを回転させる方法を紹...

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2023/10/12

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2023/12/23

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

-WEB, 作りたい
-,