カテゴリー: background-origin

（例）【CSS3】background-originの仕様方法

See the Pen
background-origin by linlin (@linlin098765)
on CodePen.

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>

div{
  background-image:url("https://www.llc-linlin.com/picture/SEO.jpg");
  width:200px;
  height:100px;
  margin-bottom:20px;
  border:dashed 8px black; 
  padding:10px;
}
.sample1{
  background-origin:border-box;
}
.sample2{
  background-origin:padding-box;
}
.sample3{
  background-origin:content-box;
}

【CSS3】background-origin：背景の基準位置を指定する

　CSS3のbackground-originは、背景の基準位置を指定するプロパティです。background-origin:fixedが指定されている場合は無効となります。

• padding-box
  背景をパディングボックスに対し相対的に適用（初期値）
• border-box
  背景をボーダーボックスに対し相対的に適用
• content-box
  背景をコンテントボックスに対し相対的に適用