CSS。背景画像固定のポイント - CSSカスタマイズ
ブラウザーをスクロールさせた時、ページの背景画像も動いて「いやだなあ」と思った事はありませんか。CSSを使うと、ブラウザーをスクロールさせた時にも、背景画像を動かさないようにする事が出来ます。
**** 手順
** 1. 基本的な書き方
o 次の行のうち、必要なものを追加します。
---- ここから -----
background-image : url(http://から始まるアドレス);
background-attachment : fixed; /* 背景画像を固定にする時は、必ずこれを追加 */
background-position : center top; /* 状況に応じて、位置指定を追加。center top は一例 */
/* その他、お好み。ワンポイント表示なら background-repeat : no-repeat; */
---- ここまで、というよりも必要な所だけ -----
o 例えば .bodyに追加する場合、次のような感じになります。
---- ここから -----
.body {
background-image : url(http://から始まるアドレス); /* 必須。背景画像を指定します */
background-attachment : fixed; /* 必須。これで固定化されます */
background-position : center top;/* これは一例。必要に応じて追加します */
}
---- ここまで -----
# ご参考：CSS用語辞典は、Web検索すると、沢山見つかります。
# 意味を簡単に知りたい方は、スタイルシートリファレンス（ABC順）（HTMLクイックリファレンス）
# ▽http://www.htmq.com/style/indexa.shtml
** 2. 背景画像を指定する場所（= zoomeのマイページの場合）
(a) 左右に隙間を入れたい時は、.page (= div.page)や .contents(= div.contents) あたり
# 私の場合は、.pageと body に画像1、.bodyに画像2（ページ左右）を指定しています。
# 理由は、bodyに画像1を指定しないと、高解像度のディスプレイで画像が切れる事が分かったからです。
# （フッターの下まで表示するような、高解像度のディスプレイです。）
# また、bodyにだけ画像1を指定すると、2008年当時の一部のブラウザーで、ページ読み込み中の表示が変になった事がありました。
# ですので、サンドイッチで挟む感じで、同じ画像を2回指定しました。（最近のブラウザーでは不要かもしれません。）
#
(b) 横幅一杯に入れたい時は、.body (= div.body)や body あたり。もしかすると、細工が必要かもしれません。
(c) 名詞カードの場合は、.name_body (= div.name_body) あたり
** 3. 背景固定のポイント
o 背景画像が、全く固定されない場合 ＝ 誤字の可能性が高いです
(a) よく間違えやすいのが、コロンとセミコロン。並び順は「名前、コロン、値、セミコロン」
(b) 空白を入れる時は、全角空白「 」ではなく半角空白「 」。全角空白を空白と解釈しないブラウザーもあります。
o ブラウザーの横幅を変更すると、背景画像の表示もずれる場合
(c) 画像の指定場所に、background-position : center top; も追加してみます。
o 原因不明の時は、「zoome マイページ。プレビューでの失敗例と対策」もどうぞ。
** 4. 背景画像の完全固定について
o zoomeの「ページの左右に空きのある」レイアウトの場合、ブラウザーの横幅で背景画像の見え方が変わります。
o これは、background-attachment : fixed; を指定すると、背景画像を置く基準がページに変わるからです。（特に指定しない場合、ページの左上から、繰り返し表示します。）
対策方法は、2通りあります。
(1) 見え方が変わっても気にならないような絵柄を選ぶ方法
(2) ページ全体のデザインと、背景の置く方法を合わせる方法
(例1) ピクセル単位で配置したい時は、ページの左右の空きを無くします。
+ 左上から要素までの距離を動かさない方法です。
(例2) zoome既定のcenter基準のデザインの場合、背景もcenter指定で配置します。
+ このページや、to_dkのzoomeマイページのページ背景は、background- position : center top; を使用しました。
+ 背景の置き場所によっては、画像が途中から始まる事があります。詳しくは、下のメモをご覧下さい。
o 「この方法を採用しても、一部のブラウザーでのみ背景画像の位置がずれた時」は、「多くのブラウザーで見栄えを合わせる」が、お役に立つかもしれません。
**** メモ
o ページの壁紙を固定化する事は、場所を見つける事が出来ましたら、後は、比較的難しくはありません。
o 難易度がぐんと上がるのは、例えば、左上に寄せないレイアウトで、名刺カードだけの背景を完全固定化したい場合です。
+ 背景の置き場所によっては、画像が途中から始まる事があります。その場合は、例えばcenter top配置の場合は、画像の左上が合うように画像を加工すると、綺麗な配置になります。
# ちなみに、to_dkのzoomeマイページの名刺カードは、完全固定化ではありません。（= 2010年5月現在）
# 画像を適当に大きく取って、ブラウザーの幅が多少変わっても「それなりに」見えるようにしました。
# CSSの設定は、background-attachment : right top;
# 横の基準点の指定は、center / left / right などありますので、ブラウザーを普通に開いた時に、変に見えない値を設定しました。
#
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
▼要素の背景を半透明にする
