今更知った！backgroundで背景画像を複数指定する方法

この記事は2012年11月2日に書かれたもので、内容が古い可能性がありますのでご注意ください。

背景画像を敷いているウェブサイトってとても多いですね。タイリングして模様の繰り返しだったり、大きな1枚の画像をババンッ！と敷いたり。時には複数枚の背景を敷く必要があったり…cssで簡単に複数枚の背景を敷くことが出来ることを知ったので書き留めておきます。

こんにちは！noramasaです。
ウェブサイトの背景画像を指定する際に、backgroundのスタイルを利用しますね。
たとえば、ページ上部にはヘッダーの背景画像、ページ下部にはフッターの背景画像を敷いたり…。
今回は、backgroundでひとつの対象に複数枚の背景画像を指定できるそうなので取り急ぎメモメモ♪

●今までの指定の仕方

たとえば、
「ページ上部に01.png、ページ下部に02.png」という指定をしたい場合、noramasaが記述しますとこんな感じになります。
この時点で「おまえは旧式だ！」と思われた方は今時の記述方法を教えてくださいましm(__)m

・・・ほにょほにょ・・・

<style>
body{
	background-image: url(01.png);  
	background-position: center top;  
	background-repeat: repeat-x;  
} 
div{
	background-image: url(02.png);  
	background-position: center bottom;  
	background-repeat: repeat-x;  
	} 
</style>

・・・ほにょほにょ・・・

<body>	//ここにページ上部となる背景を指定
<div>	//ここにページ下部となる背景を指定
ほにょほにょってなんだよ。今日はテイルズオブエクシリア2が届いてるんだよ、定時で帰りたいよ！
</div>
</body>

・・・ほにょほにょ・・・

●今までの指定の仕方

CSS3ではカンマ区切りで指定することで複数枚の設定ができるとのこと。
ただ、IE8（9も？）は未対応らしいのでまだまだ従来の記述でよさそうです。
…にしても今更知ったのか感が強いですね、もっとプロパティひとつひとつ変更点があったら見とかないとダメだな。

・・・ほにょほにょ・・・

<style>
body{
	background-image: url(01.png), url(02.png);	//カンマで区切る
	background-position: center top, center bottom;	//カンマで区切る
	background-repeat: repeat-x, repeat-x;		//カンマで区切る
} 
</style>

・・・ほにょほにょ・・・

<body>	//ここにページ背景を指定
ほにょほにょってなんだよ。今日はテイルズオブエクシリア2が届いてるんだよ、定時で帰りたいよ！
</body>

・・・ほにょほにょ・・・

ぜひ関連記事もご覧ください:D

Previous Next