カテゴリー: background

カテゴリー
background background-size CSS3

【CSS3】background-size：背景画像のサイズを指定する

（例）【CSS3】background-sizeの使用方法

See the Pen
background-size 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-size:contain;
}
.sample2{
  background-size:cover;
}
.sample3{
  background-size:20%;
}

【CSS3】background-size：背景画像のサイズを指定する

　CSS3のbackground-sizeは、背景画像のサイズを指定するプロパティです。負の値は指定できません。

  • auto
    自動的にサイズを調整する（初期値）
  • contain
    背景画像の縦横比を維持し、背景範囲に収まる最大サイズで表示
  • cover
    背景画像の縦横比を維持し、背景範囲を覆う最小サイズを表示
  • 長さ
    背景画像の縦と横のサイズを指定（片側だけ指定した場合、もう片方は自動調整）
  • %
    背景画像の縦・横サイズを％で指定

カテゴリー
background background-origin CSS3

【CSS3】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
    背景をコンテントボックスに対し相対的に適用
カテゴリー
background background-clip CSS3

【CSS3】background-clip：背景の範囲を指定する

（例）【CSS3】background-clipの使用方法

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

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
  background-color:red;
  width:200px;
  height:100px;
  margin-bottom:20px;
  border:dashed 8px black; 
  padding:10px;
}
.sample1{
  background-clip:border-box;
}
.sample2{
  background-clip:padding-box;
}
.sample3{
  background-clip:content-box;
}

【CSS3】background-clip：背景の範囲を指定する

　CSS3のbackground-clipは、背景の適用する範囲を指定するプロパティです。

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