background-attachment

ウィンドウのスクロールに対して背景画像を固定させるか、移動させるかの指定を行います。

ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / Fx1 / IE5 mac

書式

要素[.class名][#id名]{ background-attachment : 値; }

▲PageTop

指定できる値

値	初期値	意味
scroll	○	スクロールすると画面上での位置が変わります。
fixed		スクロールしても画面上での位置は変わりません。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      <!--
        #sample1 {
          background-attachment : fixed;
        }
        #sample2 {
          background-attachment : scroll;
        }
        #sample div {
          background-image : url(../../../../images/development/htmlcss/background-sample.gif);
          background-repeat : no-repeat;
          border : solid 1px;
          height : 100px;
          width : 400px;
        }
        -->
    </style>
  </head>
  <body>
    <div id="sample">
      【 background-attachment : fixed 】
      <div id="sample1">
        background-attachmentのサンプルです。<br>
background-attachmentにfixedを指定すると、いくらスクロールしても画面上で表示された位置から動かなくなります。
ワンポイントにしたい場合は、background-repeatでno-repeatを指定しないと、
標準で、repeat(タイル状に広がる)してしまうのでご注意ください。
      </div>
      <br>
      【 background-attachment : scroll 】
      <div id="sample2">
        background-attachmentのサンプルです。<br>
background-attachmentにscrollを指定すると、画像の大きさを超えてスクロールしたとき全体像が見えなくなったり、
見えなくなったりします。
      </div>
    </div>
  </body>
</html>

表示結果

サンプルコードの表示

▲PageTop

background-attachment

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS