ホームページ制作系 学校

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

投稿日:

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

・・・と、いうことでやってみました。
背景画像を複数読み込んでみた ←やってみた画面が別画面で開きます

キャプチャ↓

コードは以下の通り

/* 背景画像を複数読み込み */
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 での複数の背景の利用方法

-ホームページ制作系, 学校

Copyright© めも352 , 2018 All Rights Reserved.