画面をスクロールすると、紺色の画像は動かずに本文の文字がその下に潜り込んでいきます。 サンプル集「No.71」は、スクロールしても移動した場所から指定した位置へ瞬時に戻りますが、時間的なずれが生じて見栄えが良くありませんでした。

 画像の左部分が直角の段になっているのなら、フレームを使えば画像を固定させることができますが、斜めになっているのが問題です。この斜め部分に本文の文字を潜り込ませたいのです。

 フレームを使わずに、スクロールしても画像を指定した位置に表示させる方法は、背景画像として使うより方法はないようです。しかし、背景画像ですから、スクロールすると本文の文字が画像の上に表示されてしまいます。

 これを解決する方法として考えたのは、画像と文字を同じ色にするということです。同色なら画像の上に表示されても見えませんから潜り込んだように見えます。

 画像下部の白い部分は透過しておきます。 そのために画像は「gif」形式を用いることが必要です。肝心なのは背景画像を固定させる下記の記述だけです。

<STYLE>
BODY{background:white url(151.gif) no-repeat fixed}
</STYLE>



<HTML> <HEAD> <TITLE>151</TITLE> <STYLE> BODY{background:white url(151.gif) no-repeat fixed} </STYLE> </HEAD> <BODY> <DIV STYLE="font-size:11pt;color:3300cc;font-family:MS ゴシック; margin-top:100;margin-left:150;margin-right:150;">本文</DIV> </BODY> </HTML>