背景画像をウインドウ左上に一つだけ表示

タグ記述例
<Style Type="text/css">
<!--
BODY {
  background-color: 16進コードまたは色名;   /* 背景の色指定 */
  background-image: url("背景画像のファイル名"); /* 背景画像へのパス */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: left top;           /* 背景画像の位置は左上 */
  background-attachment: fixed;            /* スクロール時は画像を固定 */
}
-->
</Style>
てな感じの物を自サイトの環境に合わせて書き直し、<HEAD>〜</HEAD>に記述。 このページの場合は
<Style Type="text/css">
<!--
BODY {
  background-color: #FFFFFF;   /* 背景の色指定 */
  background-image: url("top11.jpg"); /* 背景画像へのパス */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: left top;           /* 背景画像の位置は左上 */
  background-attachment: fixed;            /* スクロール時は画像を固定 */
}
-->
</Style>
となるのですが、実際は
<Style Type="text/css">
<!--
BODY {
  background: #FFFFFF url("top10.jpg") no-repeat left top fixed; 
}
-->
</Style>
と、一括指定しちゃっております。

ウインドウをスクロールさせてみると、背景画像が動かないのが確認いただけるかと存じます。
(確認用に表示が縦長になるように改行やらなんやらを余分に入れてありますです)
戻る

























戻る