[CSS] background-origin

2020-08-30 [公開]

Background(背景)

CSS の background-origin は、背景画像を表示する領域 (起点)を設定するプロパティ。positionと組み合わせる事で、表示位置を調整する事も可能です。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

background-origin Code DEMO

background-origin:border-box;
background-origin:padding-box;
background-origin:content-box;
background-origin:border-box; background-position: 50px 50px;
共通code background-image: url(img/cat.jpg); background-repeat; no-repeat; border: dashed 10px #000; padding: 15px;

他の値を持つ場合があります。詳細は以下をご確認下さい

background-origin の詳細

利用できる値

境界ボックス: border-box

背景は「 borderの外側」からの相対位置
パディングボックス: padding-box

背景は「 paddingの外側 (= borderの内側)」からの相対位置
コンテンツボックス: content-box

背景は「内容の外側 (= paddingの内側)」からの相対位置

background-origin の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png); 
background-origin: border-box, content-box;

background-origin 設定時の注意

background-originとbackground-positionを一緒に指定した場合、background-originで指定した位置の左上がpositionの起点となります。
background-attachment: fixed; の場合、background-originは無視されます。
background-originは背景画像のみ適用。背景色には適用されません。

ブラウザ対応状況 (2020/07 現在)

〇
〇
〇
〇
〇
〇
〇
〇

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m

コメント