例えば青空の背景が画面いっぱいに広がるページがあり、その中でアドバルーンの写真をページ上部にスクロール固定で表示したい場合があります。これを二重背景で実現してみました。例えば、こちらのページのようになります。
意外と知られていませんが、body タグだけではなく、html タグにも背景画像を指定することができます。 これを利用すれば背景の2重指定が可能となります。
背景画像として、ホームページ・ビルダーの背景素材集から "blue_p7b.gif"、アドバルーンの画像 "10th_anniversary.gif" ファイルを用意します。
① スタイルエクスプレスから「編集」 を選択し 「スタイルの設定」 ダイアログから [色と背景] タブを開きます。
② <HTML タグ名> を html に設定します。
③ <背景画像> の <ファイル> を 「参照」 ボタンで指定します。
④ <属性> で <張り込み方> を <固定> にチェックを入れます。
⑤ [OK] ボタンをクリックします。
この結果、CSSには次のように記述されます。
⑥ 同じく 「スタイルの設定」 ダイアログで [色と背景] タブを開きます。
⑦ <HTML タグ名> に body を指定します。
⑧ <背景色> を <透明> に指定します。
⑨ <背景画像> グループで「参照」ボタンにより画像ファイルを指定します。
⑩ 画像が貼りつく <水平方向> と <垂直方向> を指定します。
⑪ <画像の属性> グループで、<繰り返し> は <繰り返さない> をチェックします。
⑫ 同じく <画像の属性> グループでの <貼り込み方> は <固定> をチェックします。
⑬ [OK] ボタンをクリックします。
この結果、CSSには次のように記述されます。
「スタイルの設定」 ダイアログで水平方向・垂直方向を指定する時に経験した問題
固定あるいはスクロールで画像の水平方向と垂直方向を一度セットしたあと、微調整のつもりでその値を変更して新しい水平・垂直方向の値を入力すると、背景画像が左隅に戻ってしまう現象があります。ソースを見ると、background-position のステートメントが消えてしまっています。
HPB-1314 と同じ問題のようですが、これはV8までの問題として報告されています。しかも、背景の固定の場合だけでなく、スクロールの場合にも発生するので違うのかもしれません。
回避方法は、背景画像の貼り付け場所の値を変更するときは、新しいスタイルをセットしなおして行うこと、ということになります。