【CSS】複数の背景画像を指定する方法

CSS3ではbackground-imgで複数の背景画像を設定することができます。これによって、背景の装飾をCSSひとつで管理することができます。

これまでは複数の要素を作成しそれぞれに背景を指定していましたが、1つのCSS上で完結できると管理もしやすいですし、コードもスッキリします。

ということで今回はCSSで複数の背景画像を指定する方法をご紹介いたします。

HTML

まずは背景を置くためのHTMLを書いていきます。今回は空のdiv要素をだけ作り進めていきます。

<div class="bg-multiple"></div>

CSS

基本的な書き方

背景を複数指定する場合のCSSの書き方は下記のようになります。ポイントはカンマで区切って指定すること。

最初に記述した背景が一番上、その後に記述した背景がどんどん下になります。つまり、左が一番上、右に行くにつれて下になっていきます。

ちなみに最後の背景にだけ、背景色(グラデーション含む)を指定することができます。※背景色を指定する場合はbackground-imageではなくbackgroundで全て指定しましょう。

グラデーションの指定方法はこちらでご紹介しています。

{
background-image: /*上*/ background1, background2, background3, background4 /*下*/;
}

背景の調整

先ほどと同じようにカンマで区切ることで、それぞれの画像にbackground-repeatやbackground-positionなどを使い、背景を調整することもできます。

{
background-size:auto, contain, cover;
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: bottom, left, right 30%, top 10px right20px;
}

実装

実際に上記コードを使って画像を配置してみます。背景画像と上に乗せる画像、ロゴのようなものを使っていきます。

完成はこんな感じです。コードも見れますのでご確認ください。

See the Pen
CSSで複数の背景指定
by Hiroki Nakamura (@marurain)
on CodePen.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です