ホーム
技術ブログ
背景に複数の画像を指定する方法

技術ブログ

2021年02月09日

[CSS]
背景に複数の画像を指定する方法

CSSで背景画像を複数指定したいということはないでしょうか。
divを重ねて一つずつ指定・・・なんてことしなくても一つの要素にまとめて指定が可能です。

背景画像の指定方法

まずは簡単にCSSで背景に画像を指定する方法のおさらいです。

背景に画像を指定する

セレクタ {
  background-image: url(画像のパス);
}

例）

div {
  background-image: url("../img/hoge.jpg");
}

ファイルへのパスは絶対パスでも相対パスでもOKです。

画像へのパスはCSSファイルからの画像へのパスになります。
HTMLファイルからのパスではないので気をつけましょう。
パスを間違えると「指定しているのに表示されない・・・」ということになります。

背景画像のサイズの指定

セレクタ {
　　background-size: 横サイズの指定 縦サイズの指定;
}

例）

div {
　　background-size: 30px 50px;
}

大きさはキーワードで指定する他、pxや%でも指定できます。

auto
元画像の大きさで表示します。
contain
元画像の縦横比を保持して、要素に元画像が全て収まるように調整します。（要素に隙間ができる）
cover
元画像の縦横比は保持して、要素をすべて覆うサイズに調整します。（要素に隙間はないが背景画像がカットされる）
数値(px)
ピクセル(px)で大きさを指定します。
数値(%)
表示領域に対する割合で指定します。

値を一つだけ指定したときは横のサイズ指定になります。
（縦はauto）

背景画像の表示位置を指定する

セレクタ {
　　background-position: X方向の位置 Y方向の位置;
}

例）

div {
　　background-position: center 0%;
}

位置の指定もキーワードによる指定と、pxや%などの指定ができ、混在もできます。
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 10% 80%;
background-position: 0 100px;
などです。

半角スペースで区切ることで、X軸、Y軸の表示位置を指定できます。
一つしか値を指定していない場合は、Y軸はcenterになります。
また、標準で左から、上からの指定位置になりますが、オフセットを変更することも可能です。
background-position: right 10% bottom 80%;
のように指定すれば右から10%、下から80%の位置になります。

背景画像の繰り返しを指定する

セレクタ {
　　background-repeat: X方向繰り返し方法 Y方向繰り返し方法;
}

例）

div {
　　background-repeat: no-repeat;
}

指定がない場合の初期値はrepeatになります。

repeat
縦横方向とも背景画像を繰り返します。
要素を超えた分に関しては切り取られます。

no-repeat
一度だけ表示します。

space
最初と最後の画像は両端に付くように表示され、あいだは等間隔で表示されます。

round
要素にあわせて端で画像が切り取られないように画像が収まるように自動的に伸縮します。

こちらも半角スペースで区切ってX方向、Y方向の繰り返し方法を指定できます。
いままでの流れで行くとX方向だけ指定しているとY方向はrepeatで固定じゃないかと思いますが、background-repeatに関しては一つ指定した場合の2つ目の値が変わるようになっています。

例えば
no-repeatを1回指定した場合は、no-repeat no-repeatを指定
repeat-xを指定した場合、repeat-x no-repeatを指定
repeat-yを指定した場合、no-repeat repeatを指定
となるようです。

背景画像をまとめて指定する場合

いままで出てきた背景画像の指定をまとめて行うことができます。
それぞれの指定を半角スペースで区切れば良いだけです。
（サイズの指定をする場合はpositionに続けて/で区切ります）

背景カラーbackground-colorも同時に指定できます。

例）

div {
　　background: #ddd url("../img/hoge.jpg") no-repeat bottom right/30px 50px;
}

背景画像を複数指定する方法

さてようやく本題です。
背景画像を一つの要素に複数指定する場合はカンマ(,)で区切ります。

div {
　　background: url("../img/hoge.jpg") repeat-x bottom,
　　url("../img/hoge2.jpg") no-repeat bottom right/30px 50px;
}

ただし、要素が多くなるとごちゃごちゃしてわからなくなることもあるので、要素別に指定を分ける方法もあります。

div {
　　background-image: url("../img/top_back_lt.png"), url("../img/top_back_rt.png"), url("../img/top_back_rb.svg"), url("../img/top_back_lb.png");
　　background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;
　　background-size: auto, auto, 530px auto, auto;
　　background-position: left top, left top, right bottom, left bottom;
　　background-color: #f0f8fc;
}

例のように、例えば４つの画像を指定したい場合は、他の要素もカンマで区切って4つ指定する必要がありますので気をつけてください。

画像を複数指定すると重なってしまう場合もあるかと思います。
複数指定した際は、最初に指定した要素が上にくるようです。