1. Top
  2. CSS
  3. background

CSS - background

background

解説

バックグラウンドのすべての属性(image, attachment, color, repeat, position)を一括して設定する。

構文

{ background: background-color || background-image || background-repeat || background-attachment || background-position}

注意事項

それぞれの属性は個別に設定することもできるが、この複合プロパティを使えば一個所で簡単に設定できる。

バックグラウンドの複合プロパティによってプロパティが設定されていない場合にはデフォルト値が適用される。たとえば"background-image"のデフォルト値はnoneである。"background: white"を設定すると"background: white none repeat scroll 0% 0%"と設定されたことになる。また、このようにバックグラウンドを白に設定すると、その前に設定されていた全てのバックグラウンド画像の表示(background-image)、バックグラウンド画像の繰り返し(background-repeat)、バックグラウンド画像の固定(background-attachment)、バックグラウンド画像の位置指定(background-position)が取り消されます。

このプロパティは継承されないが、親エレメントのバックグラウンドはデフォルトとして表示される。

最初の例はDIVエレメントのバックグラウンド色を赤、その他のプロパティをデフォルト値に設定している。二番目の例はBODYエレメントのバックグラウンドとしてある画像を表示している。この画像はまるで透かしのようにページ上に固定されている。この画像がトランスペアレントの場合は、背景色の青が見える。

DIV {background: red}

BODY {background: blue url(sample.gif) fixed}

ページの先頭へ

!important |  @font-face |  @import |  active |  background |  background-attachment |  background-color |  background-image |  background-position |  background-repeat |  border |  border-bottom |  border-bottom-color |  border-bottom-style |  border-bottom-width |  border-color |  border-left |  border-left-color |  border-left-style |  border-left-width |  border-right |  border-right-color |  border-right-style |  border-right-width |  border-style |  border-top |  border-top-color |  border-top-style |  border-top-width |  border-width |  clear |  clip |  color |  cursor |  display |  filter |  float |  font |  font-family |  font-size |  font-style |  font-variant |  font-weight |  height |  hover |  left |  letter-spacing |  line-height |  link |  list-style |  list-style-image |  list-style-position |  list-style-type |  margin |  margin-bottom |  margin-left |  margin-right |  margin-top |  overflow |  padding |  padding-bottom |  padding-left |  padding-right |  padding-top |  page-break-after |  page-break-before |  position |  text-align |  text-decoration |  text-indent |  text-transform |  top |  vertical-align |  visibility |  visited |  width |  z-index |