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

タグ記述例
<Style Type="text/css">
<!--
BODY {
  background-color: 16進コードまたは色名;   /* 背景の色指定 */
  background-image: url("背景画像のファイル名"); /* 背景画像へのパス */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: 50% 50%;            /* 背景画像の位置は画面中央 */
  background-attachment: fixed;            /* スクロール時は画像を固定 */
}
-->
</Style>
てな感じの物を自サイトの環境に合わせて書き直し、<HEAD>〜</HEAD>に記述。


このページの場合は
<Style Type="text/css">
<!--
BODY {
  background-color: #ffffff;   /* 背景の色指定 */
  background-image: url("P5080024.JPG"); /* 背景画像へのパス */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: 50% 50%;            /* 背景画像の位置は画面中央 */
  background-attachment: fixed;            /* スクロール時は画像を固定 */
}
-->
</Style>
となるのですが、実際は
<Style Type="text/css">
<!--
BODY {
  background: #FFFFFF url("P5080024.JPG") no-repeat 50% 50% fixed;
}
-->
</Style>
と、一括指定しちゃっております。

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

























【戻る】