トップページの中の プロパティの中の Bのプロパティ一覧の中の background

background

  • 最終更新:2010年1月17日 13:24

backgroundプロパティは、背景関連5つのプロパティを一括指定できるショートハンドプロパティです。
各値は、順不同で半角スペースなどの空白類文字で区切って書きます。

それぞれの値はどの順番で記載しても問題ありませんが毎回順番が変わると見難くなってしまうため、自分ルールを決めて指定する事がいいでしょう。
尚、指定をしなかった値に関しては初期値にリセットされます。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]|inherit
初期値
個別のプロパティを参照してください
適用される要素
全ての要素
継承
しません
パーセント値
background-positionのみ使用可能です
メディア
visual

backgroundのサンプル

body {
  background: #fff url(../img/bg.gif) no-repeat left top fixed;
}

全てのbackground関連プロパティを指定した場合のサンプルです。この指定は以下の指定と同じになります。

body {
  background: #fff url(../img/bg.gif) no-repeat;
}

記載していない値は初期値にリセットされる事を利用して、あまり無駄な指定をしないようにするといいでしょう。

また、別の例として通常のリンクとマウスオーバー時で背景色を変更するために、以下のように指定したとします。

ul.menu li a {
  padding-left: 15px;
  background: #fff url(../img/marker.gif) no-repeat 0em 0.5em;
}

ul.menu li a:hover {
  background: #ddd url(../img/marker.gif) no-repeat 0em 0.5em;
}

一見ショートハンドも使い効率良く記載しているように見えますが、マウスオーバー時には背景色だけ変更されれば良いため、このような書き方をしてしまうと、ul.menu li aに指定した値を変更した場合に、ul.menu li a:hoverの値も変更する必要が出てしまうため効率が悪くなってしまいます。
このような場合、以下のようにul.menu li a:hoverにはショートハンドを使わずに書きます。

ul.menu li a {
  padding-left: 15px;
  background: #fff url(../img/marker.gif) no-repeat 0em 0.5em;
}

ul.menu li a:hover {
  background-color: #ddd;
}

ショートハンドを使って背景色の指定だけしてしまうと、省略した値はリセットされてしまうので注意しましょう。

このページの上部へ