MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    background-origin

    概要

    CSS の background-origin プロパティは背景配置領域を決めます。背景配置領域は CSS の background-image プロパティで指定された画像の原点の位置です。

    background-attachmentfixed のときは background-origin は無視されることに注意してください。

    • 初期値 padding-box
    • 適用対象 全要素
    • 継承 継承しない
    • メディア visual
    • 計算値 指定値
    • アニメーションの可否 不可
    • 正規順序 形式文法で定義される一意のあいまいでない順序
    注記: background-origin プロパティに値をセットした後にショートハンドプロパティ background を呼び出し、background-origin に該当する値をセットしなかった場合、ショートハンドプロパティによって初期値にリセットされます。

    構文

    形式文法: <box>#
    background-origin: border-box
    background-origin: padding-box
    background-origin: content-box
    
    background-origin: inherit
    

    border-box
    背景はボーダー境界の外側まで引き伸ばされます(ただし z-オーダーでボーダーより奥になります)。
    padding-box
    ボーダーの下には背景が描かれません(背景はパディング境界の外側まで引き伸ばされます)。
    content-box
    背景はコンテンツボックスの内部に(クリップされて)描かれます。

    .example {
      border: 10px double;
      padding: 10px;
      background: url('image.jpg');
      background-position: center left;
      /* パディングの内側まで背景が描かれます */ 
      background-origin: content-box;
    }
    div {
      background-image: url('logo.jpg'), url('mainback.png');
      background-position: top right, 0px 0px;
      background-origin: content-box, padding-box;
    }
    background-origin: border | padding | content
    

    仕様

    仕様書 策定状況 コメント
    CSS Backgrounds and Borders Module Level 3 勧告候補  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
    content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 未サポート 3.0 (522) [3]
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?
    content-box ? ? ? ? ?

    [1] Gecko のバージョン 1.1 から 1.9.2 までは、Firefox 1.0 から 3.6(を含む)に相当する、プレフィックスつきの別の構文をサポートしていました: -moz-background-origin: padding | border

    [2] Internet Explorer のバージョン 7 までは、background-origin: border-box; であるかのような挙動をします。Internet Explorer 8 は background-origin: padding-box; であるかのような挙動をします。これは正規のデフォルト値です。

    [3] Webkit もプレフィックス版をサポートしていますが、いまのキーワードに加えて、別名を追加しています: padding, border, content

    [4] Konqueror 3.5.4 は -khtml-background-origin をサポートしています。

    関連情報

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

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