ホームページ制作で、背景画像を使用することはよくあります。
またホームページ制作入門でもどちらかといえば初級のテクニックだけで実現できます。
ただ、背景画像は1指定で1画像しか設定できません。
2つ以上背景画像を設定する場合は、二重ボックスなどスタイルシートが設定できる場所を複数作るやり方などをしていました。
ところが、調べてみるとスタイルシート1指定で複数の背景画像が設定できることがわかりました。
結構便利なので忘備録として記録いたします。
複数画像設定例
複数画像をまとめて背景に設定するやり方を解説します。
CSSの記述方法が異なる点がポイントです。
1種類だけの背景画像指定例
<style type="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>
<div class="box01"></div>この背景画像に以下の背景画像を同時に組み合わせます。
<style type="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>
<div class="box02"></div>
組み合わせたものがこちら
<style type="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>
<div class="box03"></div>二つの背景を同時に組み合わせ方の解説
上記の例のように、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;① 背景にする画像を指定します。
② リピートを指定します。
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;background-image、background-repeat、background-positionを1行にまとめて記述します。
1つの画像を指定する場合は、画像、リピート、位置を別々に記述しますが、複数画像を指定する場合は1行にまとめて記述します。
最初この省略記述がわからず、苦労しました。
でもわかってしまえば、どうということはありません。
複数背景画像に背景色の付け足しでの失敗体験。
複数の画像を背景にあてがう方法がわかり、さらに背景色を付ける必要がありました。
背景色はさすがに1色だけなので、簡単簡単と思いあてがってみたら、思わぬ落とし穴がありました。
複数画像に背景色をあてがって失敗した例
次のように背景色を付け足してみたのですが、背景色が反映されませんでした。
その記述がこちらです。
<style type="text/css">
.box04
{
// ↓↓↓↓背景色指定
background-color: #FFCC99;
// ↑↑↑↑↑
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>
<div class="box04"></div>背景色指定しているのに、色が反映されません。
なぜでしょう？
原因は表記の順番
背景色は、background-colorで指定しましたが、後にbackground: 指定があると、どうやら打ち消されるようです。
そこで、背景色の指定をbackground:の後に指定してみました。
<style type="text/css">
.box05
{
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;
// ↓↓↓↓背景色指定
background-color: #FFCC99;
// ↑↑↑↑↑
height: 400px;
width: 400px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
margin-bottom: 10px;
}
</style>
<div class="box05"></div>見事背景色が反映されました。
CSSで表記順番が影響する事例を初めて体験しました。
次のような書き方でも大丈夫です。
もしかしたら、background：に画像と一緒に背景色もまとめて記述できるのではないかと思いました。
実際に試してみたらできました。
複数画像を指定する場合は、このやり方のほうがわかりやすいです。
<style type="text/css">
.box06
{
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,
// ↓↓↓↓背景色指定
#FFCC99;
// ↑↑↑↑↑
height: 400px;
width: 400px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
margin-bottom: 10px;
}
</style>
<div class="box06"></div>色コードをダイレクトに記述するのは、なんだか斬新です。
でもこれだけで背景色が指定できます。
ちなみに、記述順番を変えたら何も表示されなくなりました。
複数画像をひとくくりにしているのだから、記述順番は関係ないかなと思い、表記順番を変えてみたところ、何も表示されなくなりました。
<style type="text/css">
.box07
{
background:
// ↓↓↓↓背景色指定
#FFCC99,
// ↑↑↑↑↑
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>
<div class="box07"></div>背景色指定は一番最後にしないとダメでした。
よくよく考えると、背景画像も赤丸の上に星が重なっているのも表記順番によるものなのだと気づきました。
CSSはうまくできているものです。
その分、知らないことも多くあると気づきました。