イヨノート

Design, Code and other chaos included.

css: フッター固定 + スクロール分を含む背景画像指定

2012.05.30

下記2つを同時にcssで行う場合のメモ。

  • 背景を (スクロール分の) 非表示領域まで表示
  • フッターをウィンドウの下部に固定

hoge
html, body {
	height: 100%;
}

body {
	background: url(/common/images/body-bg.gif) repeat 0 0;
}

div#container {
	height: 100%;
}

	div#content {
		position: relative;
		width: 840px;
		min-height: 100%;
		margin: 0 auto;
		background-color: #ffffff;
	}

ウィンドウ下部にフッター固定の方法は下記参照。

画面全体に背景画像を敷きたい場合、bodyタグに背景を指定。
bodyタグはheight: 100% (親要素の高さに対する割合 = この場合表示領域) だが――

ルート要素の背景は、キャンバスの背景となり、全部のキャンバスを覆い、それが唯一のルート要素自体のために描かれた場合にそれがあるのと同じ点で('background-position'に)固定される。ルート要素は、再びこのような背景を描かない。

上記の仕様により、非表示領域 (スクロール分) も背景が表示される。
(html (ルート要素) に背景を指定すると、当然bodyタグは表示領域分しか背景が表示されなくなる。)

さらに重ねたい場合は、コンテンツエリア (内容の大きさに依存する) に指定。