このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-position:背景画像の表示位置

記事Aug. 29th,2018
July 7th,2020
背景画像の表示位置を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-position: 0% 0%
適用対象 すべての要素
継承 不可
定義 CSS Backgrounds and Borders Module

background-position”はbackground-imageなどで指定された背景画像の表示位置を指定するプロパティです。

サンプルコード

div { background-position: center;}

説明
inherit 親要素のプロパティ値を継承する
<position> top”、“left”、“bottom”、“right”、“center”で表示位置を指定
<length> px”、“em”などで座標を指定
<percentage> 表示領域の幅、高さに対する割合で座標を指定

値の指定方法

値の数と意味

値は1つまたは2つ指定することができます。

値を1つ指定する場合

値を1つ指定する場合その値は指定する値によって水平方向の表示位置か垂直方向の表示位置のどちらかを表すことになります。

div { background-position: 〚水平方向の表示位置〛;}
div { background-position: 〚垂直方向の表示位置〛;}

値がleftまたはrightの場合その値は水平方向の表示位置を指定します。垂直方向の表示位置はcenterとなり表示領域の中央になります。

div { background-position: left;}
div { background-position: right;}

値がtopまたはbottomの場合その値は垂直方向の表示位置を指定します。垂直方向の表示位置はcenterとなり表示領域の中央になります。

div { background-position: top;}
div { background-position: bottom;}

値を<length>”値または<percentage>”値で指定するその値は水平方向の表示位置を指定します。垂直方向の表示位置はcenterとなり表示領域の中央になります。

div { background-position: 〚水平方向の表示位置〛;}

値を2つ指定する場合

値を2つ指定する場合は一方の値が水平方向の表示位置、もう一方の値が垂直方向の表示位置を指定します。

div { background-position: 〚水平方向の表示位置〛 〚垂直方向の表示位置〛;}

いずれかの値がleftまたはrightの場合もう一方の値はcenterもしくは<length>”値<percentage>”値で垂直方向の表示位置を指定します。この場合もう一方の値に再度leftまたはrightを指定することはできません。

div { background-position: left 〚垂直方向の表示位置〛;}
div { background-position: right 〚垂直方向の表示位置〛;}

いずれかの値がtopまたはbottomの場合もう一方の値はcenterもしくは<length>”値<percentage>”値で水平方向の表示位置を指定します。この場合もう一方の値に再度topまたはbottomを指定することはできません。

div { background-position: top 〚水平方向の表示位置〛;}
div { background-position: bottom 〚水平方向の表示位置〛;}

両方の値を<length>”値または<percentage>”値で指定する場合は1つ目の値が水平方向の表示位置、2つ目の値が垂直方向の表示位置を指定します。

div { background-position: 〚水平方向の表示位置〛 〚垂直方向の表示位置〛;}

基準となる座標

値の指定方法によって表示位置の基準となる座標が違います。

初期値

背景画像の位置の初期値は“background-position: 0% 0%”です。背景画像は表示領域の左上に表示されます。

“background-position:”の初期値
<position>”値で値を指定する場合

値がleftまたはrightの場合背景画像は表示領域の左端もしくは右端に表示されます。

“background-position:”が“right”の時の表示位置

値がtopまたはbottomの場合背景画像は表示領域の上端もしくは下端に表示されます。

“background-position:”が“bottom”の時の表示位置
<length>”値で値を指定する場合

値を<length>”値で指定する場合表示領域の左上を原点として背景画像の左上の座標で表示位置を表示します。

“background-position:”を長さで指定した時の表示位置
<percentage>”値で値を指定する場合

値を<percentage>”値で指定する場合表示領域の左上を原点として背景画像の位置を指定します。背景画像内の基準点は背景画像の左上から背景画像の大きさに対して指定された<percentage>”値で決まります。

“background-position:”をパーセントで指定した時の表示位置
右もしくは下を基準にして指定する

rightまたはbottomにオフセット値を指定することで、右もしくは下を基準にして背景画像の位置を指定することができるようになりました。

div { background-position: bottom 150px right 100px;}
div { background-position: right 100px bottom 150px;}
“background-position:”を右下から指定した時の表示位置

使用例

背景画像の表示位置を指定する

<position>”値で指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: center;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: right;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: bottom;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: bottom right;
}

<length>”値で指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: 75px;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: 25px 75px;
}

<percentage>”値で指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: 25%;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: 45% 80%;
}

右下から指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: bottom 50px right 25px;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
background-position: bottom 50px left 25px;
}

複数の背景画像を指定する

CSS3では複数の背景画像を指定することができるようになりました。最初に指定した背景が最前面、最後に指定した背景が最背面になるように、重ねて描画されます。
background-position”の値を“,(カンマ)”で区切って並べて記述することでそれぞれの背景画像の表示位置を指定することができます。値の順番はbackground-imageで指定した値の順番に対応します。

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png), url(background_sample2.png);
background-repeat: no-repeat, no-repeat;
background-position: 10% 20%, 30% 40%;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク