`background-attachment` プロパティ。

CSSに於ける要素の背景画像を固定するか否かの指定・background-attachment プロパティに関する解説です。

`background-attachment` プロパティとは。

background-attachment プロパティは、要素の背景画像を固定するか否かの指定です。

スクロールした場合に、背景画像も合わせてスクロールさせるか、スクロールさせずに固定させるかを指定します。

`background-attachment` プロパティの扱い。

CSS水準: 第一水準から。但し、複数画像については第三水準から。
CSS第三水準に於けるモジュール: 背景・枠線モジュール
継承の有無: background-attachment プロパティは、上位要素からは継承されません。
対象セレクタ: 対象となるセレクタに制限はありません。
対象メディア: 視覚系のメディア全てが対象となります。

`background-attachment` プロパティの書式。

background-attachment プロパティの書式は、以下のようになります。

background-attachment: 値

複数画像を用いる場合は、background-image プロパティで指定した順序に従って , で区切って列挙します。

全水準共通の値。

値としては、以下のものが取れます。

inherit: 一番近い上位要素での背景画像の並べ方を継承します。
scroll: スクロールに合わせて背景画像もスクロールします(デフォルト)。
fixed: スクロールが生じた場合も、スクロールせずに固定します。
尚、ウェブブラウザが画像固定出来ない場合、CSS第二水準(CSS 2)まででは scroll 値と同じ扱いにしても良いとしておりましたが、CSS第二水準第一改訂版(CSS 2.1)からは、固定出来ないなら無効な値として弾くよう求めております。

第三水準以降で使えるの値。

加えて、CSS第三水準(CSS 3)以降では、以下の値も取る事が出来ます。

local: (当該要素の内容がスクロール出来る場合に)当該要素内をスクロールしたときにのみ動くようにします。

`background-attachment` プロパティの記述例。

例えば、<body>要素の一番下に、横方向にのみ背景画像「Tulip.GIF」を隙間なく並べる場合は、

body {
    background-image: url('Tulip.GIF');
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #8ECDF0;
    color: #000;
    }

と記述します。

`background-attachment` プロパティに関する注意事項。

CSS第三水準で使える値について。

以下の記述には、制作者の私見が入ります。

第三水準で使えるようになった local 値は、インターネットエクスプローラ 8.0 まででは対応出来ません。

平成23年11月13日現在、IE 8.0 の利用者がかなり多い現状を考慮すると、使わない方が安全かと思われます。

WAP 2.0での注意事項。

WAP 2.0では、background-attachment プロパティは必須ですが、KDDI/沖縄セルラーのEZウェブ対応端末に搭載されているミリアド社のWAP 2.0 ウェブブラウザ(オープンウェーヴ社から事業譲受)には実装されておりません。