構文

background-attachment : 値;

説明文

　Webページの背景などは，画面をスクロールすると，それに従って背景もスクロールされる。もし，背景はスクロールさせず，本文のみをスクロールさせたい場合は，「background-attachment」を利用する。

　background-attachmentでは以下のような値を指定できる。

値意味
fixed画像を固定し，スクロールしないようにする
scroll要素のスクロールに合わせて画像もスクロールするようにする

使用例

● CSSの定義

body { background-attachment : fixed;
       background-image : url('bgtop.jpg');
       background-position : top; 
       background-repeat : repeat-x; }

● HTMLの例

<h1>さくら咲く</h1>
<p>　3月末になると日本全国的に桜が咲き乱れ，私たちに春が来たことを知らせ
てくれます。それを仲間達と酒などを共に，春の息吹を喜び合います。</p>
<p>　一般的に桜というとソメイヨシノが思い浮かべるでしょう。しかし，桜は
ソメイヨシノだけでなく，たくさんの種類が存在します。例えば，芝桜は野原に
小さな花を咲かせます。しかし，野を埋めつくすように咲くため，白やピンク，
黄色の桜絨毯には圧倒されます。</p>
<p>　また，京都の円山公園には枝垂桜が見事な花を咲かせます。これは大きく
見事なため，1本だけでも圧巻されます。</p>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目