cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の表示位置の基点」
WEBページ作成
広告
background-origin「背景画像の表示位置の基点」
background-imageで指定した背景画像を表示する基準位置を指定します。
background-attachmentにfixedが指定されている場合は、background-originの指定は無効になります。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | しない |
広告
background-origin の指定方法
| 構文 | |
|---|---|
|
background-origin : padding-box | border-box | content-box; |
|
| プロパティ/設定値 | 意味 |
| background-origin: padding-box; | パディングボックスを配置の基準とする （パディングは含む。ボーダー、マージンは含まない。） |
| background-origin: border-box; | ボーダーボックスを配置の基準とする （パディング、ボーダーは含む。マージンは含まない。） |
| background-origin: content-box; | コンテンツボックスを配置の基準とする （パディング、ボーダー、マージンを含まない。） |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
background-origin のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 10px dashed #0000ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
border : 10px solid #6495ed;
color : #fff;
font-weight : bold;
}
.css-background-img{
background-image : url(../../../image/bg-img.png);
background-repeat : no-repeat;
}
.css-padding-box{
background-origin : padding-box;
}
.css-border-box{
background-origin : border-box;
}
.css-content-box{
background-origin : content-box;
}
<!-- html -->
<div class="common">
<div class="cssTitle">background-origin : padding-box;</div>
<div class="css-padding-box css-background-img">
パディング上から画像を表示
</div>
<div class="cssTitle">background-origin : border-box;</div>
<div class="css-border-box css-background-img">
ボーダー上から画像を表示
</div>
<div class="cssTitle">background-origin : content-box;</div>
<div class="css-content-box css-background-img">
パディングの内側から画像を表示
</div>
</div>
background-origin : padding-box;
パディング上から画像を表示
background-origin : border-box;
ボーダー上から画像を表示
background-origin : content-box;
パディングの内側から画像を表示
| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
広告