CSSで複数の背景画像指定して重ねる方法

2019年9月14日

CSSだけで複数の背景画像を重ねるのってどうやるんだっけ？

CSSで複数の画像を重ねたい？OK！！簡単だよ！では今回は、CSSで複数枚の画像を重ねる方法や、画像だけでなく、グラデーションの色なども重ねる方法なども解説しよう！

CSSで複数の背景画像を重ねる書き方

CSSで複数の背景画像を重ねる方法は、CSS3から可能になった。

まず最初に、複数枚の背景画像を重ねる時の書き方は、セレクタ {background-image: 背景1, 背景2, 背景3;}のように「,」カンマ区切りで記述する（backgroundでも可）。

重ねる数は何枚でも可能で、先に記述した方が重なり順も上になる。

CSS3での背景画像複数指定に対応しているブラウザとしては「IE9以上」という認識で大丈夫だろう。

CSS

.test { 
  background: url(image/01.jpg), url(image/02.jpg);
}

ちなみに、複数指定も便利だが、backgroundの基本をおさらいしておきたい方は、こちらの記事も合わせて読もう！

▶ CSSの背景画像指定！backgroundの使い方とプロパティの説明書

CSSのbackgroundってプロパティ指定が沢山あって難しい〜！誰かわかりやすく説明してくれよ。backgroun…

複数の画像だけでなくグラデーション色も指定する方法

グラデーションの色も含めて、複数指定したい場合もあるだろう。その方法も、基本的には同じで、１つの背景として、「,」カンマで区切るだけで良い。

CSS

.test { 
  background: url(image/01.jpg), 
              url(image/02.jpg),
              linear-gradient( to right, rgba(255,100,100,0.5), #fff );
}

グラデーションの指定

ちなみにグラデーションの指定の仕方はbackground: linear-gradient(to 方向, 開始色, 終了色); 形式だ。

色の指定には、#ff9900といったHEXの色コードや、色名（例：red）で指定したり、透明度をつけたい場合は、rgba(255, 100, 100, 0.5);といった形式でも色指定することもできる。

複数の背景画像を指定時のその他のプロパティの設定方法

では次に複数枚の背景画像を指定した時の、background-positionやbackground-repeatやbackground-sizeはどう指定すれば良いのだろうか？

こちらも簡単、背景の指定時と同じように、同じ順番で書けば良いだけだ。さっそくサンプルコードを見てみよう！

CSS

.test { 
  background-image: url(image/01.jpg), url(image/02.jpg);
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 50px 50px, 30px 30px;
  width: 500px;
  height: 300px;
}

HTML

<div class="test"></div>

CSSのショートハンドを使った複数枚の画像指定はできる？

複数枚の画像を指定時に、ショートハンドを使って一気に指定したい場合も、基本的には同様にカンマ区切りで指定するだけでよいが注意点もある！

複数指定した場合、ショートハンドがうまく動作しないことがある。うまくいかない主な原因は背景画像の複数指定に限らずbackground-sizeのショートハンドの指定の仕方にポイントがある。

background-sizeのショートハンドは指定の仕方に注意

background-sizeを入れたショートハンドを使いたい場合は、background-positionとセットで/をはさんで指定すると動作する。具体的にはleft top / 50px 50pxのように書く必要があり、順番も大事でbackground-positionの後に/をはさんでbackground-sizeの順番でないと表示されない！

CSSショートハンドのNG例

.test {
  background:url(image/01.jpg) left top no-repeat 50px 50px,
             url(image/02.jpg) left top no-repeat 50px 50px;
             url(image/03.jpg) right bottom no-repeat 50px 50px;
}

CSSショートハンドのOK例

.test {
  background:url(image/01.jpg) left top / 50px 50px no-repeat,
             url(image/02.jpg) right top / 50px 50px no-repeat;
             url(image/03.jpg) right bottom / 50px 50px no-repeat;
}

※一部の古いブラウザでは、ショートハンドで指定すると動かないものがあるので、安全に行くのであれば、個別で書くのが無難である。

CSSで複数の背景画像指定して重ねる方法のまとめ

CSS3で複数の背景画像を重ねて指定できるようになった事で、コードもシンプルになり、CSSアニメーションなどをつかって、スライドショーのような事も可能になるだろう。

業界的に「古いIEへの対応」もどんどん不要になっていく中、こういった便利なCSS3の新機能を覚えて使うことで作業高率をどんどん上げていこう！

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント