+ Sample / Aqua +

■ 背景画像の使い方について ■

グラデーションありの方は画像が繰り返されて表示されると、不自然なので、縦(=Y)に繰り返されないようにすることと(横=Xはかまわない)、ウインドウのスクロールに対して背景画像がスクロールされないようにスタイルシート(CSS)で指定すれば大丈夫です。

ここでは、CSSを、<head></head>内に記述します。

<style type="text/css">
<!--

body {
background-image: url(sample.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
}

-->
</style>

しかしこれだけだと、背景画像の高さの500ピクセルを超えたウインドウサイズで見ると、下部が何も表示されなくなってしまいます。

表事例#1

これを解決するには、背景画像が表示される位置を下げて、多くのユーザーのパソコンのモニタサイズが1024*768である(実際にはタスクバーなどが表示されているのでそれより狭くなりますが)事を踏まえれば、だいたい768からせいぜい900辺りまであれば大丈夫だと思います。
そこで、250ピクセル程下から表示されるようにして、背景色を白色にすれば、上から250ピクセルまでは白の背景色でそこから背景画像が表示されることになり違和感なく使えるはずです。

<style type="text/css">
<!--
body {
background-image: url(sample.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-color: #FFFFFF;
background-position: 0px 250px;
}
-->
</style>