background-attachment/背景画像固定

background-attachmentプロパティを使うと背景画像を固定出来ます。

説明

 背景画像はデフォルトがスクロールですが、background-attachmentプロパティを利用する事で固定出来ます。

 例えば、通常はブラウザを下にスクロールすると画像は上に移動していきますが、移動しないように出来ます。

background-attachment説明

構文

 background-attachmentプロパティの構文は以下の通りです。

background-attachment: scroll又はfixed;

 scrollはブラウザを上下にスクロールすると画像もスクロールされます。これがデフォルトです。

 fixedではこれを固定させる事が出来ます。

 尚、ブラウザによっては<body>以外で設定してもfixedが効かない事があります。

利用例

 background-attachmentにfixedを指定した例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
background-image: url(test.png);
background-attachment:fixed;
}

<div>本文</div>

 以下で「例を表示」をクリックすると、このページの文章を記述した部分に画像が表示されます。ブラウザをスクロールするとfixedを設定した時の表示の仕方が分かります。

 ブラウザをスクロールしてもディスプレイに対する画像の表示位置は固定のままです。

 「デフォルト」をクリックするとデフォルト設定であるscrollの表示が確認出来ます。

 ブラウザをスクロールすると画像がディスプレイに対して上下にスクロールします。

 「元に戻す」をクリックすると画像は消えます。

留意点

 fixedはディスプレイに対して固定されるため、ブラウザのスクロールに合わせて文章がスクロールすると、文章に対してはスクロールするように見え、逆にscrollの方が固定しているように見えます。

 文章の背景で使う場合は、使い方によっては非常に見辛くなります。

 又、写真を背景に使って画面一杯に表示させて固定した場合でも、最近では様々な解像度のディスプレイがあるため留意が必要です。

 例えば自分のパソコンではディスプレイ一杯に写真が表示されて固定されたとしても、解像度の大きなディスプレイで見ると見辛い可能性があります。

ディスプレイ解像度による表示範囲の違い

関連ページ

・ホームページ作成「ボックスのまとめ

 背景画像だけでなく、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)