背景画像をスクロールして表示



比較的小さな画像ファイルを縦に繰り返して表示したい場合があります。

これを実現するためには『スタイルシート』を用いて、次のように記述する必要があります。

以下の部分を<head>～</head>の中に記述して下さい。

<style type="text/css">
<!--
body {background-attachement:設定値;
background-image:url('表示させたい画像ファイルのファイル名'); }
-->
</style>

『background-attachement:』の次（つまり、設定値の部分）には下のように指定します。

表記法 説　　　　　　明
fixed 文字がスクロールされても画像は固定されている
scroll 文字とともに画像もスクロールする

この説明項目はページがスクロールできるくらいの長さが必要なので、ここから下には無意味な文字を書いて、長くしています。


background-attachement:scrollにすると、文章をスクロールさせると背景画像もスクロールされてこんな感じの動きをします。


長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列

長い文章にするための無意味な文字列


background-attachement:scrollにすると、文章をスクロールさせると背景画像もスクロールされてこんな感じの動きをします。

前のページへ