コンテンツボックスの左上隅を基準に背景を配置します：

#example1 {
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:35px;
    background-origin: content-box;
}

定義と用法

background-origin プロパティは、背景画像をどこに配置するかを指定します。

注: background-attachment プロパティが "fixed" の場合は、このプロパティの効果はありません。

デフォルト値：	padding-box
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.backgroundOrigin="content-box" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

CSS 構文

プロパティの値

プロパティ
background-origin	4.0	9.0	4.0	3.0	10.5

値	説明	Play it
padding-box	デフォルト値。背景画像は、パディングボックスの左上隅を基準に配置します	Play it ❯
border-box	背景画像は、バーダーボックスの左上隅を基準に配置します	Play it ❯
content-box	背景画像は、コンテンツボックスの左上隅を基準に配置します	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	このプロパティは親要素を継承します。 inherit を参照

CSS3 background-origin プロパティ

定義と用法