background-position:背景画像が表示される初期位置を指定する
初期値 | 0% 0% |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | <length>値、<percentage>値、calc(); |
対応ブラウザ | caniuseで確認 |
background-positionプロパティの説明
background-position
は、背景画像が表示される初期位置を指定します。この位置は、background-origin
で定義される基点からの相対距離となります。
背景に関するプロパティを一括で指定する場合は、ショートハンド・プロパティのbackground
を使用して下さい。
background-positionに指定できる値
- <position>
- CSSで使用できるデータ型の一種で、二次元座標の相対位置を指定します。キーワードやオフセットの数値やパーセンテージが使えます。
background-positionの使い方とサンプル
background-position
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
background-position: top;
background-position: right;
background-position: bottom;
background-position: left;
background-position: center;
/* <length>値 */
background-position: 0 0;
background-position: 10px 20px;
background-position: 50vw 50vh;
/* <percentage>値 */
background-position: 50% 35%;
background-position: 0% 100%;
/* 各辺からのオフセット値 */
background-position: top left 10px;
background-position: bottom 20% right;
background-position: top 3rem left 25%;
/* グローバル値 */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;
background-positionの実例
それでは簡単なサンプルを見てみましょう。background-position
で示す配置位置は、background-origin
で定義された基点からの相対距離です。まずは、その仕組みを理解する必用があります。
以下の内容は、background-position:0px 0px;
のまま、background-origin
の値だけを変更した時の挙動を示しています。
表示確認
上記で示した通り、背景画像の表示開始位置はbackground-origin
の値で定義されます。そこからの開始位置を指定するのが、background-position
の役割りです。background-repeat
の値がrepeat
だった場合は、指定した位置を基点に繰り返しが発生します。
今度は、background-origin
の値を初期値であるpadding-box
に固定し、background-position
の位置指定を変えてみましょう。
CSS
.samp_box {
padding: 1rem;
border: 5px solid #999;
background: #0cf;
text-align: center;
}
.samp_box > div {
width: 200px;
margin: 1rem auto 0 auto;
padding: 2rem;
border: 1px solid #333;
background-image: url(../images/sample_bg_stripe.png);
background-repeat: no-repeat;
background-origin: padding-box;
}
#item_1 {
background-position: center;
}
#item_2 {
background-position: bottom right;
}
#item_3 {
background-position: 10px 20px;
}
HTML
<div class="samp_box">
<p>background-position</p>
<div id="item_1">center</div>
<div id="item_2">bottom right</div>
<div id="item_3">10px 50%</div>
</div>
表示確認
background-positionに関連するCSSプロパティ
背景(バックグラウンド) | |
---|---|
background | 背景に関する指定をまとめて行う |
background-attachment | 背景画像の固定・移動を指定する |
background-blend-mode | 背景色や背景画像の描画モードを指定する |
background-clip | 背景の描画範囲を指定する |
background-color | 背景色を指定する |
background-image | 背景画像やグラデーションを指定する |
background-origin | 背景画像を配置する基準点を指定する |
background-position | 背景画像の表示開始位置を指定する |
background-repeat | 背景画像の繰り返しを指定する |
background-size | 背景画像を表示するサイズ(大きさ)を指定する |
backdrop-filter | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |