cssで複数背景画像指定のうち、特定の画像だけサイズを大きくする

2025年7月29日

CSSで一つのタグに複数の背景画像を設定することができます。
以前の記事でも紹介しています。

CSSで複数枚背景画像を設定しさらに背景色も加える。

複数画像をまとめて背景に設定できることで、レスポンシブ対応などに応用ができます。
ところが、今回このようなケースがありました。

複数画像を背景設定し、その中の1枚だけサイズを変更する。

レスポンシブで、スマホ表示の際に特定画像だけサイズを調整する必要がありました。
背景画像サイズは、背景画像指定とは別物です。
はたして特定の背景画像だけサイズを変えることなんてできるのか?

調べて対応できましたので、備忘録として記録いたします。

今回の内容

1. 今回やりたいこと
2. 実際にできたものがこちら
3. 具体的な設定方法
- 3.1. 設定前のソース
- 3.2. 画像を1枚だけサイズを大きくしたソース
4. ちなみに次のような記述方法でもＯＫでした
5. いろんなやり方を駆使して、目的のデザインを構築する

今回やりたいこと

複数指定している背景画像のうち、1枚だけサイズを大きくします。

こちらのサンプルは、複数画像を背景に設定したサンプルです。

実際にできたものがこちら

実際に1つの背景画像だけ大きくすることができた例がこちらです。

複数同時設定した背景画像のうち、一つだけサイズを変更することができました。

具体的な設定方法

複数同時指定した背景画像のうち、1つだけをどうやって大きくしているのでしょうか？
そのやり方を以下に記載します。

設定前のソース

画像を大きくする前のソースはこちらです。
画像を複数背景に設定しています。

<!doctype html><html><head><metacharset="shift_jis"><title></title><metaname="viewport"content="width=device-width, initial-scale=1"><styletype="text/css">.box 
{
	background: 
	url(01.gif)  no-repeat  left  top,
	url(02.gif)  no-repeat  right  top,
	url(03.gif)  no-repeat  left  bottom,
	url(04.gif)  no-repeat  right  bottom;
	height: 90vh;
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
}
</style></head><body><divclass="box"></div></body></html>Code language:HTML, XML(xml)

画像を1枚だけサイズを大きくしたソース

上記のソースに対し、画像1枚だけ大きくしたソースがこちらです。

<!doctype html><html><head><metacharset="shift_jis"><title></title><metaname="viewport"content="width=device-width, initial-scale=1"><styletype="text/css">.box 
{
	background: 
	url(01.gif)  no-repeat  left  top,
	url(02.gif)  no-repeat  right  top,
	url(03.gif)  no-repeat  left  bottom,
	url(04.gif)  no-repeat  right  bottom;
	height: 90vh;
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
	background-size: 300px  auto, auto, auto, auto;

}
</style></head><body><divclass="box"></div></body></html>Code language:HTML, XML(xml)

background-size: 300px auto, auto, auto, auto;　と、サイズを背景画像の数だけ指定して実現しています。
今回の例だと、背景画像は4つあるので、background-size: を4つ指定しています。

ちなみに、auto ４つと、300px１つで、5つサイズ指定されているんじゃないの？
と思われがちですが、これで4つの画像サイズ指定になります。

なぜならば、300px auto（1個目の画像サイズ指定）,auto（2個目の画像サイズ指定）,auto（3個目の画像サイズ指定）,auto（4個目の画像サイズ指定）という意味だからです。

1個目だけ、横サイズと縦サイズを別々に指定しているだけで、後の3つは縦横まとめてautoという意味なのです。

ここが少しわかりにくかったです。

ちなみに次のような記述方法でもＯＫでした

上記の記述方法は、なれれば気になりませんが、慣れていないと理屈が分かりにくいです。
ですが以下のような、理屈的にわかりやすい方法もありました。
これだと確かにわかりやすいです。

.box 
{
	background: 
	url(01.gif)  no-repeat  left  top  /  300px  auto,
	url(02.gif)  no-repeat  right  top,
	url(03.gif)  no-repeat  left  bottom,
	url(04.gif)  no-repeat  right  bottom;
	height: 90vh;
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
}
Code language:CSS(css)