かえでのWebログ

lfdiaryのように記事部に画像を使用する場合。

div.day

最下部に表示する画像を持ってきます

div.day {
	background-image:	url("div_day_bottom.gif");
	background-position:	bottom left;
	background-repeat:	no-repeat;
}

div.day h2

最上部に表示する画像を持ってきます

div.day h2 {
	background-image:	url("div_day_h2.gif");
	background-position:	top left;
	background-repeat:	no-repeat;
}

div.body, div.comment, div.tb

記事部の真ん中で繰り返される画像を持ってきます

div.day div.body, div.day div.comment, div.day div.tb {
	background-image:	url("div_day_body.gif");
	background-position	top left;
	background-repeat:	repeat-y;
}

IE向けの修正

IEでdiv.dayで定義した背景画像がdiv.bodyで定義した背景画像に上書きされてしまうのでIE向けに再定義

div.tb ul, div.edit

div.tb ul, div.edit{
	_background-image:	url("div_day_bottom.gif");
	_background-position:	bottom left;
	_background-repeat:	no-repeat;
}

修正 2006/09/13

div.bodyで定義した背景画像が表示されないのはdiv.day-additionalとの境界の認識が狂っている為だとわかりました（バグ）
尚、上記の手法だとTBがない場合に背景画像が表示されません。

これらの問題を解決させる為に、div.bodyのpaddingとdiv.day-additionalとの境界をはっきりとさせるため、IE向けに以下を追加します

div.day-additional{
	_padding-bottom: 1px;
}