【CSS】「background-origin」の使い方。【背景画像の配置の開始位置の設定。】

CSSの「background-origin」の使い方が詳しく知りたい。

この記事はこのような方へ向けて書いています。

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「background-origin」について学習しちゃって下さい！

また、下の動画でも「background-origin」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「background-origin」は何ができるプロパティ？

「background-origin」を使うことで、背景画像の「配置の開始位置」の設定ができます。

背景画像の設定をするなら、知っておいた方がいいかなと思います！

このように、水色の枠線が付いた要素に背景画像の設定をしました。

ここで注目してほしいのは、背景画像が「border領域」に入っていないことです。

では、「background-origin」を使ってみます。

上のように、「background-origin」を使うことで、背景画像の「配置の開始位置」の設定をすることができます。

注目してほしいのは、配置の開始位置が「border領域」から始まってる点です。

なるほど！イメージできたよ。

「background-origin」に設定できる値は？

「background-origin」に設定できる値は、下記の通りです。

これらがありますね。

※他には、「unset」などの、グローバル値も使えます。

シンプルだね！

「background-origin」に「border-box」を使う。

「background-origin」に「border-box」とすると、背景画像の配置の開始位置は「border領域」からとなります。

「borderボックス」の開始位置と、背景画像の配置の開始位置が等しい感じです。

※「background-position」などを使うことで、背景画像の位置は変更できます。

境界線が点線になってるから、どこから背景画像が始まってるか分かりやすい！

「background-origin」に「padding-box」を使う。

「background-origin」に「padding-box」とすると、背景画像の配置の開始位置は「padding領域」からとなります。

「paddingボックス」の開始位置と、背景画像の配置の開始位置が等しい感じです。

これが、初期値です。

※「background-position」などを使うことで、背景画像の位置は変更できます。

たしかに、背景画像の配置の開始位置が「padding領域」からになってるね！

「content-origin」に「content-box」を使う。

「background-origin」に「content-box」とすると、背景画像の配置の開始位置は「content領域」からとなります。

「contentボックス」の開始位置と、背景画像の配置の開始位置が等しい感じです。

※「background-position」などを使うことで、背景画像の位置は変更できます。

背景画像を設定した要素の「padding」を「50px」つけました。

たしかに、背景画像の配置の開始位置が「content領域」からになってるね！

「content領域」は「padding領域の」内側に位置する領域です。

ここを理解するには「ボックスモデル」の知識が必要。

CSSにある「ボックスモデル」という概念を前提にして書いているので、領域に関する知識が必要な場合は、それについて僕が下記の動画で詳しく解説しているので、もしよかったらご視聴ください。

公式定義について。

「background-origin」の公式定義は、下記の通りです。

これについても、知っておいてください！

「background-origin」を使う上での注意点。

背景画像を設定してる要素の「background-attachment」の値が「fixed」の場合は、「background-origin」は効かない、というルールがあるので注意してください。

もし上手く効かない場合は、これを確認してみてくださいね。

まとめ。

「background-origin」を使うと、背景画像の「配置の開始位置」の設定ができる。

「background-origin」に設定できる値は、下記の通り。

ここを理解するには「ボックスモデル」の知識が必要。

「background-origin」の公式定義は、下記の通り。

背景画像を設定してる要素の「background-attachment」の値が「fixed」の場合は、「background-origin」は効かない。

また、下の動画でも「background-origin」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！