background-imageで設定した背景画像の基準位置を変更するコードを紹介します。
概要
background-imageで設定した背景画像の基準位置を変更するには、background-originプロパティを利用します。
書式
[設定]には以下の値を設定できます。
| 値 | 動作 |
|---|
| padding-box | 画像の基準位置は左上の枠線の内側になります |
| border-box | 画像の基準位置は枠線も含めた枠の左上になります |
| content-box | 画像の基準位置はPaddingを含めた左上(テキスト描画の開始位置)になります |
実装例
コード
以下のHTML,CSSファイルを作成します。
<!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>
.Frame1 {
height: 18rem;
padding:0;
/*padding: 1rem 1rem 2rem 4rem;*/
border: dashed 48px #808080;
background-origin: border-box;
background-image: url('image.png');
}
背景画像
背景画像は以下です。
実行結果
background-originの値を変更して表示結果を確認します。また、paddingが0の場合と、paddingが設定されている場合の違いも確認します。
background-origin 記述なし
画像の基準位置は左上の枠線の内側になります。
background-origin:padding-box と同じ動作になります。
paddingなし
paddingあり
background-origin: padding-box
画像の基準位置は左上の枠線の内側になります。
paddingなし
paddingあり
background-origin: border-box
画像の基準位置は枠線も含めた枠の左上になります。
paddingなし
paddingあり
background-origin: content-box
画像の基準位置はPaddingを含めた左上(テキスト描画の開始位置)になります。
paddingなし
paddingあり
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
作成日: 2011-08-18
