複数の背景画像を表示させたい
ボックスに複数の背景を適用して、より複雑な背景を作成したいときは、backgroundプロパティ、または各種背景を設定するプロパティの値を「,」で区切って複数指定することで、ひとつのボックスに複数の背景画像と背景色を指定することができます。なお、複数の背景画像・背景色を指定した場合、先に指定されたものほど上に重なるように表示されます。そこで、ボックス全体を塗りつぶす背景色は最後にしていするようにします。
個別のプロパティを使って指定する書き方
複数の背景画像を指定すると、値がどうしても長くなってしまいます。横に長くなって読みづらい場合委は、「,」の前後で改行します。backgroundプロパティ以外にも、background-imageやbackground-positionなどの、個別のプロパティを使って複数の背景画像の設定することも可能です。
background-image: url(./images/bg1.png),
url(./images/bg2.png),
url(./images/bg3.png);
background-color: #bb9167;
background-position: left top,right 20px bottom 20px,left top;
background-repeat:repeat-x,
no-repeat,
repeat;サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.setmenu{
padding: 80px;
width: 500px;
background: url(./images/cbg1.png) left top repeat-x,url(./images/cbg.png) right 20px bottom 20px no-repeat,url(./images/cbg2.png) repeat left top,#bb9167;
}
.setmenu h1{
text-align: center;
}
</style>
</head>
<body>
<div class="setmenu">
<h1> 街角夕暮れのCAFE </h1>
<p>材料にこだわった自家製ケーキが自慢のカフェです。 </p>
<h2>ケーキセット </h2>
<p>お好きなケーキに+200円でコーヒー/紅茶がつきます。 </p>
<h2>ランチセット </h2>
<p>サンドイッチランチ、パスタランチを日替わりメニューで中略 </p>
</div>
</body>
</html>実行結果
