背景画像の表示位置の基点を指定するには？
要素書式
- background-origin：【位置指定】;
対応ブラウザ
値一覧
| 値 | 内容 |
| 位置指定 | 指定できる値は次の通りです。
「border-box」：ボーダー領域の左上を基準として、背景画像を表示します。
「padding-box」：パティング領域の左上を基準として、背景画像を表示します
「content-box」：背景画像をコンテント（内容）領域の左上を基準として表示します。
（それぞれにおいて、領域の左上は(0,0)、右下は(100%,100%)となります）
なお、「background-origin」プロパティの初期値は「padding-box」となります。 |
解説文
background-originプロパティを使うと、背景画像の表示位置の基点を指定することができます。
background-attachmentプロパティの値が「fixed」に指定された場合は、background-originプロパティでの指定は無効となります。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
p{
width:400px;
height:100px;
padding:15px;
border:20px dashed #cc0099;
color:red;
font-size:25px;
background: url(bg2.png) no-repeat;
}
#sample1{
background-origin:border-box;
}
#sample2{
background-origin:padding-box;
}
#sample3{
background-origin:content-box;
}
</style>
</head>
<body>
<p id="sample1">背景画像をボーダー領域の左上を基準として表示します。</p>
<p id="sample2">背景画像をパティング領域の左上を基準として表示します。</p>
<p id="sample3">背景画像をコンテント（内容）領域の左上を基準として表示します。</p>
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目
