background-originの使い方[HTML&CSS]

background-originの使い方

background-originは、背景の基準位置を決める際に使われます。

background-originプロパティの値の設定方法

border-box	背景の基準位置がborderになるよう指定
padding-box	背景の基準位置がpaddingになるよう指定
content-box	背景の基準位置がコンテンツボックスになるよう指定

表だけではわかりづらいと思うので、使用例や画像を使いながら解説したいと思います。

border-box

border-boxは、背景の基準位置がborderになるよう指定する値です。

HTML:

<div class="box">テキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: border-box;
}

ブラウザでの表示:

ブラウザ表示のように、borderの左上を基準に背景を指定しています。

padding-box

padding-boxは、背景の基準位置がpaddingになるよう指定する値です。

HTML:

<div class="box">テキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: padding-box;
}

ブラウザでの表示:

ブラウザ表示のように、paddingの左上を基準に背景を指定しています。

content-box

content-boxは、背景の基準位置がコンテンツボックスになるよう指定する値です。

HTML:

<div class="box">テキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: content-box;
}

ブラウザでの表示:

ブラウザ表示のように、コンテンツボックスの左上を基準に背景を指定しています。

まとめ

・border-boxは、背景の基準位置がborderになるよう指定する値

・padding-boxは、背景の基準位置がpaddingになるよう指定する値

・content-boxは、背景の基準位置がコンテンツボックスになるよう指定する値

それでは、最後まで読んでいただきありがとうございました。