XHTML/CSS・トップ | CSSプロパティ・目次

●背景画像を固定する

 background-attachmentは背景画像を固定するプロパティです。指定できる値はfixedですが、scrollも指定できます。また、すべての要素に指定できます。両者の違いはfixedが画面をスクロールしたときに動かないのに対し、scrollは通常どおり、背景画像もスクロールされます。ここでは sun002.jpgの背景画像を指定し、fixedの値を指定しています。background-attachment: fixedの指定だとデフォルトで画像は左上に配置されます。(実際はそのほかのプロパティとの複合指定ですが)背景画像を任意の位置に配置したい場合は background-positionおよび background-repeatプロパティの組み合わせとなります。(使い方につきましては別項参照)

【CSS】↓

body {
  background-color: #000000;
  background-image: url(sun002.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ffffff;
}

※fixedの値の意味を説明するために長めに解説し、画面がスクロールできるようにします。

 background-imageは背景画像を指定するプロパティです。background-repeatは背景画像の並び方を指定するプロパティで、no-repeatの値を指定することにより、背景画像が繰り返し表示されないようにしています。backgroundプロパティを使うとソースがシンプルになります。(必要に応じて使いわけると良いでしょう。別項に backgroundプロパティの解説がありますので併せてご参照ください。)

【参考CSS】↓

body {
  background: #000000 url(sun002.jpg) no-repeat fixed;
  color: #ffffff;
}

XHTML/CSS・目次 | 背景・目次

Copyright (C) 2004-2007 http://www.xml.vc/