スタイルシートで背景画像をブラウザの右下に表示するサンプル

Posted by kumacchi on 2008年7月22日 , No comment

スクロールの無いページ（例えばデザイン重視のトップページなど）で右下の位置に背景画像を一個だけ表示したい場合があるときは下の様になります。

index.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Language” content=”ja”>
<title>スタイルシートで背景画像を右下に表示するサンプル</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
スタイルシートで背景画像を画面の右下に表示するサンプルです。
<a href=”/”>KUMA TYPE TOPに戻る</a>
</body>
</html>

style.css

*{
margin:0px;
padding:0px;
}

html{
height:100%;
}

body{
height:100%;

    background-image: url(“bg.jpg”);
    background-repeat: no-repeat;
    background-position: right bottom;

}

実際のサンプル

ありがちなのが、htmlに対するheight:100%を指定していなくて、bodyだけ100%にしてもbodyの高さがブラウザの表示領域の高さに対して100%にならなくて、期待どうりに表示されない場合です。実際にはbodyの親要素であるhtmlにもheightを100%にしてあげないと期待どうりにならず画像がコンテンツがある位置に表示されます。

失敗のサンプル

僕もこれではまりましたｗ。

(Visited 73 times, 1 visits today)

タグ : スタイルシート