バックグラウンド属性に関してのシート|CSSプロパティ

CSSで制御する事のできるバックグラウンド(設けられた領域の背景)に関する属性のリストです。

CSSプロパティのバックグラウンド属性に関するリスト

background: ★ ★ ★;

個別プロパティ
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

バックグラウンドで一括指定できるプロパティ。全ての要素を含めるわけではなく、background-imageのみの記述も可能。順番に特に指定はない。

ただしbackground-positionによる数値入力は左・上の順番なので注意。

/* 全てを指定した場合 */
background: #ffffff url(../images/sample.jpg) repeat-x fixed left top;

/* 背景画像のみ */
background: url(../images/sample.jpg) repeat-x;

background-color: ★;

  • transparent(透明色 初期値)
  • カラー名
  • #RGB

インライン・ブロック要素の背景色を指定できる属性。指定されていない場合は透明色となる。インライン要素に指定した場合はline-height属性の値分の背景が表示される。

/* カラー名 */
background-color: white;

/* RGBの値 */
background-color: #ffffff;

background-image: ★;

  • none
  • url()

背景に外部イメージを指定できる属性。繰り返し表示ができるので1pxの画像を使いグラデーションの背景を作ったりなどできる。リンク要素に指定してロールオーバーのボタンを作ったりもできる。

画像の相対パスURLはCSSファイルが置いてあるフォルダーから始まる。

background-image: url(../images/sample.gif);

background-attachment: ★;

  • scroll(スクロール 初期値)
  • fixed(ディスプレイに固定)

背景画像を固定したい場合に指定する属性。背景を固定した場合、背景画像が追走しているような表現になる。通常はスクロールされる。

background-attachment: fixed;

background-repeat: ★;

  • repeat(初期値)
  • repeat-x(横に繰返す)
  • repeat-y(縦に繰返す)
  • no-repeat(繰返さない)

背景画像を繰返し表示させたい場合に指定する属性。タイルを並べたような表現。

background-repeat: no-repeat;

background-position: ★;

左基準の値
  • left
  • center
  • right
上基準の値
  • top
  • center
  • bottom
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • ex(xの大きさ)
  • %
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

背景画像の表示位置を指定する属性。左上を基準に制御する。

/* 基本 */
background-position: left top;

/* 数値 左から10px/上から50% */
background-position: 10px 50%;