ウェブサイト作成

background プロパティ

background プロパティにてボックスの背景に関する指定ができます。

重要な画像だけをHTMLのimgタグを使って表示し、装飾目的で使う画像は、CSSの背景設定 background プロパティで表示するようにしましょう。

background プロパティで背景指定

  • 背景は要素が成形するボックスの内容領域、パディング領域、ボーダー領域に適用されます。
  • 背景は色と画像の指定ができますが、画像が背景の上に重なって配置されます。
  • マージンの領域は透過されます。
  • 規定値は「transparent」で、親要素(親ボックス)の背景が透けてみえます。
background :背景関連のプロパティの一括指定
background-attachment :背景画像の移動・固定
background-color :背景色
background-image :背景画像
background-position :背景画像の初期位置
background-repeat :背景画像の繰り返し

背景色(background-color)

値: "色"(REG値かキーワード)|tansparent(透過)|inherit(継承)

   background-color: pink

   background-color: #CCCCFF

背景画像(background-image)

値: "URI"noneinherit(継承)

   background-image: url(/img/square.gif)

背景画像の繰り返し(background-repeat)

値: repeat(繰り返す)|repeat-x(水平方向に繰り返す)|repeat-y(垂直方向に繰り返し)|no-repeat(ひとつだけ表示し、繰り返さない)|inherit(継承)

   background-repeat: repeat

   background-repeat: repeat-x

   background-repeat: repeat-y

   background-repeat: no-repeat

背景画像の移動・固定(background-attachment)

値: scroll(文章のスクロールとともに移動)|fixed(ブラウザ表示領域に対して固定)|inherit(継承)

body { background-attachment: fixed }

このページの左上に出ている三角のグラデーション画像にこのスタイルを設定しています。

背景画像の初期位置(background-position)

値: "パーセンテージ""長さ"[left|cebter|right] [top|center|bottom] (水平・垂直位置)|inherit(継承)

規定値ではパディング領域の左端上端からの設定となります。
(「0% 0%」の設定と同じ)
「横方向 縦方向」のように左端からの値、半角スペース、上端からの値を指定するようにすると間違いが起こらず表示できます。

   background-position: 30% 20%

   background-position: 350px 5px
   マイナスの値も指定可能

   background-position: right center

背景関連プロパティの一括指定(background)

値: [ background-color | background-image | background-repeat | background-attachment | background-position]の値inherit(継承)

背景関連のプロパティを順不同で一括指定することができます。

   background: #EEFFEE url(/img/square.gif) center repeat-y

ただし、値を省略した場合は規定値が指定されます。
background; white
とした場合は
background: transparent none repeat scroll 0% 0%
が指定されたと解釈されます。

p { background-color: pink ; background:url(/img/square.gif) center repeat-y }
と指定した場合、前に指定したピンク色の背景色は規定値(tansparent)で上書きされて、後で指定した背景画像だけが表示されます。