動く背景19■部分■ 部分の背景画像の上下往復移動     UP日時 : 2014/08/25

body指定の背景画像は右下の女性イラスト。
左上の七夕が、div空間(部分)指定の上下ゆらゆらの背景画像です。

七夕の画像実寸は横379px縦480px。上下の移動幅c=20なので 移動幅の2倍の数値だけdiv空間の縦のサイズを小さくします。
20×2=40で40pxだけ小さくしたので、divのサイズは横379px縦440pxです。
これで上下に揺らしても継ぎ目は出ません。

そして右下の女性の背景画像はbodyの背景画像なので、画像の上に文字を載せることができます。
でも左上の七夕の画像は、divの背景画像なので、ほんとうはdivの中の文字だけを、画像の上に表示できます。でも、今回はbodyの背景画像と同じ扱いにしたいので、z-index:-1;の記述をすることで、bodyの背景画像と同じ扱いになりました。

それから今回は画像二つとも、位置固定指定を入れているので、スクロールしても、同じ位置に表示されます。
不要なら固定位置指定は削除して下さい。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』