Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

BACKGROUNDバックグランド(背景)TOPCSSPropertiesbackground

  1. background-colorバックグラウンド(背景)の色
  2. background-image背景に使用する画像
  3. background-repeat背景画像の繰り返し
  4. background-attachment背景画像の表示方法
  5. background-position背景画像の表示位置
  6. background背景のショートハンドプロパティ

background-position背景画像の表示位置

プロパティの値[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
初期値0% 0%
対象要素全要素
継承無効
%画像の表示サイズに対する比率
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

背景に使用する画像の表示位置を指定します。

		プロパティの書式				機能
background-position: <percentage>
		背景画像の位置を x y (横 縦)の順にパーセンテージで指定
background-position: <length>
		背景画像の位置を x y (横 縦)の順にLength値で指定
background-position: top (center, bottom)	背景画像の縦方向の位置
background-position: left (center ,right)	背景画像の横方向の位置

プロパティの記述例

div	{
	background-image: url(img/graphic.png);	背景画像のURIを指定
	background-repeat: no-repeat;		背景画像の表示を繰り返さない
	background-position: 10px 10px;		背景画像の位置をLength値で指定
	}
キーワード値による指定
中央
left toptopright top
中央leftcenterright
left bottombottomright bottom
パーセンテージによる指定
中央
0% 0%50% 0%100% 0%
中央0% 50%50% 50%100% 50%
0% 100%50% 100%100% 100%
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.