divで作成した領域で、速度の違う３種類の背景画像を移動させることで、少し立体的に見える３Ｄの水の中を漂う女性を作成しました。
スクロールしても表示位置は固定です。
その固定位置を、body要素の上にするか下にするかは、CSSの基準領域のid="aka1"でのz-index指定で決めます。
「z-index:1;」でbodyの上（見本）になり、「z-index:-1;」で下になります。
今回は
同一の水の背景画像を使用して、真ん中の水の背景画像に透過指定を入れて移動します。
さらに１番上に、背景が白っぽい女性の背景画像に透過指定を付けて移動させます。
使用した画像は、どれも背景透過はされていない画像です。
でも
CSSで透過指定を付けることで、お互いが透けて見えて面白い効果がでます。
水や空のテクスチャのような背景画像は、二重に重ねて上の背景画像に透過指定を付け、違う速度で移動させるとアニメのように流れて見えます。
ただし、敷き詰めても継ぎ目の無い画像でなければなりません。
女性の画像は、移動させないなら
■背景移動９ 桜の３Ｄ移動■の指定を参考にして下さい。
「桜の少女」は、位置指定をマイナス指定にすることで基準領域のid="aka1"の下にはみ出して表示していますが、位置指定を削除すると初期値の「top:0; left:0;」となり、id="aka1"の中に納まります。
その時、id="aka1"の領域の横幅と縦幅は、女性の画像のサイズと同じか小さくします。
理由は女性の画像には背景があるからです。女性の画像サイズよりid="aka1"が大きいと、余白部分の色が濃くなってしまいます。
同じ理由で、女性の画像には必ずCSSで背景透過指定を付けます。
「桜の少女」は背景透過画像なので問題ないですが、
「水の女性」は背景のある画像なので、透過指定を付けないと移動する水が見えなくなります。
最後に、固定位置指定の説明。
いままでは
id="aka1"には、CSSでposition: relative;指定をしていましたが、position:fixed;に変更しました。
そうするとスクロールしても、同じ位置に固定して表示されます。
ただし、<div id="aka1">〜〜〜</div>の中に入る、id="aka1"を基準にした位置指定をするid="aka2"やid="aka3"やimgの位置指定は、必ず「position:absolute;」でなくてはダメです。
難しいのは領域（画像）の重ね方です。
領域の重ね方の方法の参考は
AllAboutから。
コツがわかれば何枚でも重ねられます。
移動領域の増やし方、減らし方は、
■背景移動２table背景移動・複数設定■の説明をご覧下さい。