cssで複数画像背景の横幅を1枚ごとに変える

2025年9月2日

ＣＳＳで背景画像を複数設定する方法があります。

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

複数画像を背景にするときは、以前はdivタグを複数重ねて無理やり設定したりしていましたが、一つのタグ内で、複数背景画像を設定できるのはとても便利だなと思いました。

今回さらにこの複数背景画像を使用した事例で、頭をひねることがありました。

スマホ表示時と、ＰＣ表示時で背景画像の大きさを個別に変更したい。

ＣＳＳで背景画像サイズをまとめて変更することはできます。
background-size: を指定すれば、背景画像サイズを変更できます。

ですが、今回は複数背景画像一つ一つのサイズをそれぞれ異なるサイズにしたいのです。
スマホ表示に合わせて、背景画像の大きさを調整するためです。

そんなことが果たして可能なのか?
調べて対処できましたので、備忘録として記録いたします。

今回の内容

1. 今回やりたいこと
2. ベースとなるソース
3. 複数の背景画像にそれぞれ個別にサイズを指定する方法
- 3.1. 個別に背景画像サイズを変更する記述文法
4. ＰＣ版とスマホ版の背景画像切り替えに必要なテクニック

今回やりたいこと

今回やりたいことは、以下のようなことです。

複数の背景画像を個別にサイズ変更をしたいのです。

ベースとなるソース

今回は、複数背景画像を設定した以下のＨＴＭＬソースをもとに、背景画像個別サイズ変更を行います。

<!doctype html><html><head><metacharset="shift_jis"><title></title><styletype="text/css">.box 
{
	background: 
	url(blue.gif) no-repeat left center,
	url(yellow.gif) no-repeat center center,
	url(red.gif) no-repeat right center;
	display: block;
	height: 600px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
}
</style></head><body><divclass="box"></div></body></html>Code language:HTML, XML(xml)

スタイルシートで、3つの円の画像を左、中央、右に配置しています。
この記述に、画像別にサイズの指定を付け足します。

いったいどうやればよいのでしょうか?

複数の背景画像にそれぞれ個別にサイズを指定する方法

結論からですが、以下のように記述すれば、背景画像のサイズを個別に変更できます。

.box 
{
	background: 
	url(blue.gif) no-repeat left center / 100px auto,
	url(yellow.gif) no-repeat center center / 320px auto,
	url(red.gif) no-repeat right center / 600px auto;
	display: block;
	height: 600px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
}

Code language:CSS(css)

一見どこが変わったの?
という感じですが、よく見ると以下の部分が変わっています。

	url(blue.gif) no-repeat left center / 100px auto,
	url(yellow.gif) no-repeat center center / 320px auto,
	url(red.gif) no-repeat right center / 600px auto;

わかりますでしょうか?
/ を挟んで、「100px auto」という記述があります。
これが個別サイズ指定になります。