background

背景に関する値をまとめて指定します。但し、各値の初期値については定義されていないようです。

ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

書式

要素[.class名][#id名]{ background : background-image background-color bakcground-attachment background-position
background-repeat; }

▲PageTop

指定できる値

値	初期値	意味
inherit		親要素の値を継承します。

・background-imageプロパティの指定(背景画像の指定)
値	初期値	意味
none		画像を表示しません。
画像URL		指定したURLの画像を表示します。

・background-colorプロパティの指定(背景色の指定)
値	初期値	意味
transparent		当該要素は透明となり、上位の要素で指定されている色になります。
16進数表記・色名		指定したカラーコード・色名が背景色になります。

・background-attachmentプロパティの指定(背景画像の固定またはスクロールの指定)
値	初期値	意味
scroll		スクロール時背景画像もスクロールします。
fixed		スクロールしても背景画像の位置が固定されます。

・background-positionプロパティの指定(配置の指定)
値	初期値	意味
数値+単位		左上部からの距離を指定します。単位例：px,em,ex,%
left		左端に配置します。
right		右端に配置します。
center		中央に配置します。
top		上端に配置します。
bottom		下端に配置します。

・background-repeatプロパティの指定(背景画像の繰り返し表示を行うか否かを指定)
値	初期値	意味
repeat		要素の範囲内で全体に繰り返します。
repeat-x		横一直線に繰り返します。
repeat-y		縦一直線に繰り返します。
no-repeat		繰り返しをしません。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        background : #cccccc url(../../../../images/development/htmlcss/background-sample.gif) repeat-x bottom;
        width : 50%;
        height : 100px;
      }
    </style>
  </head>
  <body>
    <div id="sample1">backgroundサンプル</div>
  </body>
</html>

表示結果

backgroundサンプル

▲PageTop

background

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS