toggle
2018-02-09

背景画像を複数読み込む(ボックスを囲みたい)

背景画像を読み込んだ時に、訓練生さんからの質問。
「ボーダーのようにボックス全体を囲めないですか?」
 ↑
これ、考えたことがなかった(^^;)
訓練生さんの質問って、新鮮!

・・・と、いうことでやってみました。

背景画像は、CSS3から複数読み込みが可能
カンマ区切りで書いた順番に反映されます。

コードは以下の通り

background-image: url(img/bg-top.png),       /* 上 背景画像 */
		 url(img/bg-bottom.png),   /* 下 背景画像 */
		 url(img/bg-left.png),    /* 左 背景画像 */
		 url(img/bg-right.png) ; /* 右 背景画像 */
background-repeat: 
		 repeat-x,    /* 上 背景画像 繰り返し */
		 repeat-x,   /* 下 背景画像 繰り返し */
		 repeat-y,  /* 左 背景画像 繰り返し */
		 repeat-y; /* 右 背景画像 繰り返し */
background-position: 
		 left top,     /* 上 背景画像 位置 */
		 left bottom, /* 下 背景画像 位置 */
		 left top,   /* 左 背景画像 位置 */
		 right top; /* 右 背景画像 位置 */

元ネタ MDN CSS での複数の背景の利用方法

関連記事