background-origin

バックグラウンドオリジン（背景）

意味背景画像の配置の起点

background-originとは？

background-originプロパティは、要素の背景画像が配置される起点を指定します。このプロパティによって、背景画像がボーダー、パディング、またはコンテンツ領域のどこから始まるかを決めることができます。

background-originの具体的な使い方

コンテンツ領域から背景画像を表示する例

<style>
    div {
        background-image: url('https://picsum.photos/100/100');
        background-origin: content-box;
    }
</style>
<div>
    このdiv要素の背景画像はコンテンツ領域から始まります。
</div>

div要素の背景画像がコンテンツ領域から表示されるように指定しています。

background-originに関するよくある質問

Q. background-originの主な値は？

A. background-originの主な値は、border-box（デフォルト）、padding-box、content-boxの3つです。border-boxはボーダーの外側から、padding-boxはパディングの外側から、content-boxはコンテンツ領域から背景画像を配置します。

Q. 他のbackgroundプロパティとの違いは？

A. background-originは背景画像の配置起点を指定するのに対し、background-clipは背景の描画範囲を指定します。background-positionは起点からの相対的な位置を指定するのに使用されます。

background-originが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのbackground-originやbackground-attachment、background、background-color、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。