mozilla
Your Search Results

    background-position

    概要

    background-position CSS プロパティは、定義された背景画像の、background-origin で定義された背景レイヤーに対する初期の相対位置をセットします。

    このプロパティの値が、background-position CSS プロパティの後の要素に適用される background 短縮プロパティで設定されていない場合は、このプロパティの値は、短縮プロパティで設定された初期値にリセットされます。
    • 初期値 0% 0%
    • 適用範囲 すべての要素
    • 継承 継承しない
    • 割合 背景位置レイヤーのサイズを参照し、そこから画像サイズを引いた値。
    • メディア visual
    • 計算値 1 個または 2 個の値が指定された場合、<length> は絶対値、それ以外は <割合> となります。
      3 個または 4 個の値が指定された場合、キーワードの組と、<length> または <割合> となります。

    構文

    background-position: <bg-position>[, <bg-position>]*
    background-position: [ <割合>| <length>| left | center | right  ] 
                         [ <percentage> | <length> | top  | center | bottom ]?
    background-position:  [ top | center | bottom ]
    background-position:  inherit

    詳細な内容は以下:

    <bg-position> は以下のいずれか:
    [ <割合>| <length>| left | center | right ]
    [ <percentage> | <length> | top | center | bottom ]?
    [ top | center | bottom ]
    inherit

    1 個または 2 個の値を指定し、サポートしているブラウザは 4 個まで指定できます。負の <割合><length> の値も許容されます。

    • 値が 1 個だけ指定された場合、2 個目の値は center と仮定されます。
    • 最初の値は水平位置を表し、2 番目の値は垂直位置を表します (少なくとも 1 個の値がキーワードでなければ)。

    仕様上は、上からと左からだけでなく、4 個の値で任意の角からのオフセット位置を指定できます。4 個の値が指定された場合、2 側面と 2 個のオフセット値を含める必要があります。この指定方法はまだ、すべてのブラウザでサポートされていません。

    <割合>
    0% 0%, の値の組 (0 0 と等価) は、画像の左上角がボックスのパディング端に沿って配置されます。100% 100% の値の組は、画像の右下角をパディング領域の右下角に配置します。100% 100% の値の組は、画像をパディング領域の左から 14%、上から 84% の位置に配置します。
    <長さ>
    2cm 1cm の値の組は、画像をパディング領域の左から 2cm、上から 1cm の位置に配置します。
    top
    垂直位置 0% と等価です。
    right
    水平位置 100% と等価です。
    bottom
    垂直位置 100% と等価です。
    left
    水平位置 0% と等価です。
    center
    他の値が指定されなければ、垂直位置 50%、水平位置 50% と等価です。

    実際の表示を確認

    .exampleone {
      background-image: url("logo.png");
      background-position: top;
    }
    
    .exampletwo {
      background-image: url("logo.png");
      background-position: 25% 75%;
    }
    
    .examplethree {
      background: url("logo.png") 2cm bottom;
    }
    
    .examplefour {
      background-image: url("logo.png");
      background-position: center 10%;
    }
    
    .examplefive {
      background: url("logo.png") 3em 50% no-repeat;
    }
    
    .examplesix {
      background-image: url("logo.png");
      background-position: right 20px bottom 20px;
    }
    	
    .exampleseven {
      /* 複数の背景画像: 各画像は、対応する位置スタイルにすべてマッチします。 */
      background-image: url("img1.png"), url("img2.png");
      background-position: 0 10px, center;
      background-repeat: no-repeat, repeat;
    }

    仕様

    仕様書 策定状況 コメント
    CSS Backgrounds and Borders Module Level 3 勧告候補 複数の背景のサポートを追加。4 個の値を持つ構文、実装にマッチするように割合の定義を調整。
    CSS 2.1 勧告 キーワード値と <length><割合> の値のミックス指定を許容。
    CSS 1 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
    複数の背景 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
    4 値構文 未サポート WebKit bug 37514 13.0 (13.0) 9.0 10.5 未サポート WebKit bug 37514
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート (有) 1.0 (1) (有) (有) (有)
    複数の背景 ? 1.0 (1.9.2) ? ? ?
    4 値構文 未サポート 13.0 (13.0) ? ? 未サポート

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: Marsf, ethertank
    最終更新者: ethertank,
    サイドバーを隠す