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

2020年6月9日2021年4月8日

ホームページ制作で、背景画像を使用することはよくあります。
またホームページ制作入門でもどちらかといえば初級のテクニックだけで実現できます。

ただ、背景画像は1指定で1画像しか設定できません。
2つ以上背景画像を設定する場合は、二重ボックスなどスタイルシートが設定できる場所を複数作るやり方などをしていました。

ところが、調べてみるとスタイルシート1指定で複数の背景画像が設定できることがわかりました。

結構便利なので備忘録として記録いたします。

今回の内容

1. 複数画像設定例
2. 二つの背景を同時に組み合わせ方の解説
- 2.1. 1画像を背景にする場合のCSS記述方法
- 2.2. 2つの画像を同時に指定する場合のCSS記述方法
3. 複数背景画像に背景色の付け足しでの失敗体験。
- 3.1. 複数画像に背景色をあてがって失敗した例
4. 原因は表記の順番
- 4.1. 次のような書き方でも大丈夫です。
- 4.2. ちなみに、記述順番を変えたら何も表示されなくなりました。

複数画像設定例

複数画像をまとめて背景に設定するやり方を解説します。
CSSの記述方法が異なる点がポイントです。

1種類だけの背景画像指定例

<styletype="text/css">.box01
{
	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
	background-image: url(https://office-obata.com/report/wp-content/uploads/2020/04/star.png);
	background-repeat: repeat-y;
	background-position: center center;
	margin-bottom: 10px;
}
</style><divclass="box01"></div>Code language:HTML, XML(xml)

この背景画像に以下の背景画像を同時に組み合わせます。

<styletype="text/css">.box02
{
	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
	background-image: url(https://office-obata.com/report/wp-content/uploads/2020/04/maru.png);
	background-repeat: repeat-x;
	background-position: center center;
	margin-bottom: 10px;
}
</style><divclass="box02"></div>Code language:HTML, XML(xml)

組み合わせたものがこちら

<styletype="text/css">.box03
{
	background: 
	url(https://office-obata.com/report/wp-content/uploads/2020/04/star.png) repeat-y center center,
	url(https://office-obata.com/report/wp-content/uploads/2020/04/maru.png) repeat-x center center;
	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
	margin-bottom: 10px;

}
</style><divclass="box03"></div>Code language:HTML, XML(xml)

二つの背景を同時に組み合わせ方の解説

上記の例のように、2つ以上の画像を背景画像として同時に指定することができます。

ただCSSの記述が少し異なりますので、いかに解説いたします。

1画像を背景にする場合のCSS記述方法

1種類の画像を背景にする場合、以下のように記述します。


background-image: url(https://office-obata.com/report/wp-content/uploads/2020/04/star.png);
background-repeat: repeat-y;

background-position: center center;Code language:JavaScript(javascript)

①　背景にする画像を指定します。

②　リピートを指定します。
repeat：縦横すべてリピート
repeat-x：横方向のみリピート
repeat-y：縦方向のみリピート
no-repeat：リピートなし
省略：縦横すべてリピート（repeatと同じ）

③　画像位置をしていします。
top：上に指定
bottom：下に指定
left：左に指定
right：右に指定
center：中央に指定
省略：左上に指定
top right ：右上に指定（縦・横の同時指定が可能）

2つの画像を同時に指定する場合のCSS記述方法

これに対し、２つ以上の画像を同時に背景画像に指定する場合は、以下のように記述します。

background: 
url(https://office-obata.com/report/wp-content/uploads/2020/04/star.png) repeat-y center center,
url(https://office-obata.com/report/wp-content/uploads/2020/04/maru.png) repeat-x center center;Code language:JavaScript(javascript)

background-image、background-repeat、background-positionを1行にまとめて記述します。

1つの画像を指定する場合は、画像、リピート、位置を別々に記述しますが、複数画像を指定する場合は1行にまとめて記述します。

最初この省略記述がわからず、苦労しました。
でもわかってしまえば、どうということはありません。

複数背景画像に背景色の付け足しでの失敗体験。

複数の画像を背景にあてがう方法がわかり、さらに背景色を付ける必要がありました。

背景色はさすがに1色だけなので、簡単簡単と思いあてがってみたら、思わぬ落とし穴がありました。

複数画像に背景色をあてがって失敗した例

次のように背景色を付け足してみたのですが、背景色が反映されませんでした。
その記述がこちらです。

<styletype="text/css"></style><divclass="box04"></div>Code language:HTML, XML(xml)

背景色指定しているのに、色が反映されません。
なぜでしょう？

原因は表記の順番

背景色は、background-colorで指定しましたが、後にbackground: 指定があると、どうやら打ち消されるようです。

そこで、背景色の指定をbackground:の後に指定してみました。

<styletype="text/css"></style><divclass="box05"></div>Code language:HTML, XML(xml)

見事背景色が反映されました。
CSSで表記順番が影響する事例を初めて体験しました。

次のような書き方でも大丈夫です。

もしかしたら、background：に画像と一緒に背景色もまとめて記述できるのではないかと思いました。

実際に試してみたらできました。
複数画像を指定する場合は、このやり方のほうがわかりやすいです。

<styletype="text/css"></style><divclass="box06"></div>Code language:HTML, XML(xml)

色コードをダイレクトに記述するのは、なんだか斬新です。
でもこれだけで背景色が指定できます。

ちなみに、記述順番を変えたら何も表示されなくなりました。

複数画像をひとくくりにしているのだから、記述順番は関係ないかなと思い、表記順番を変えてみたところ、何も表示されなくなりました。

<styletype="text/css">.box07
{
	background#FFCC99url(https://office-obata.com/report/wp-content/uploads/2020/04/star.png) repeat-y center center,
	url(https://office-obata.com/report/wp-content/uploads/2020/04/maru.png) repeat-x center center;

	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
	margin-bottom: 10px;
}
</style><divclass="box07"></div>Code language:HTML, XML(xml)