background-imageの背景画像の基準位置を指定する

概要

background-imageで設定した背景画像の基準位置を変更するには、background-originプロパティを利用します。

書式

background-origin:[設定];

[設定]には以下の値を設定できます。

値	動作
padding-box	画像の基準位置は左上の枠線の内側になります
border-box	画像の基準位置は枠線も含めた枠の左上になります
content-box	画像の基準位置はPaddingを含めた左上(テキスト描画の開始位置)になります

実装例

コード

以下のHTML,CSSファイルを作成します。

BackgroundImageOrigin.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="BackgroundImageOrigin.css" />
</head>
<body>
  <h1>background-origin のデモ</h1>

  <div class="Frame1">
    枠1です。
  </div>

</body>
</html>

BackgroundImageOrigin.css

.Frame1 {
  height: 18rem;
  padding:0;
  /*padding: 1rem 1rem 2rem 4rem;*/
  border: dashed 48px #808080;
  background-origin: border-box;
  background-image: url('image.png');
}