Webデザイナーブログから学ぶホームページ制作

「background-position」プロパティは、背景画像の表示位置を指定するCSSプロパティです。
背景画像の表示位置を指定する値は、「上」「上下中央」「下」「左」「左右中央」「右」などの指定ができます。

背景画像の表示位置を指定する値は、垂直方向「top」「center」「bottom」、水平方向「left」「center」「right」などの値を指定することができます。その他、「px」「%」「em」「rem」などの値を指定することができます。
また、「background-position」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin

背景画像の表示位置を指定する場合は、「background-position」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
background-position:背景画像の表示位置;
}

/* 基本値 */
background-position: top;/* 垂直方向（上） */
background-position: center;/* 垂直方向（中央） */
background-position: bottom;/* 垂直方向（下） */
background-position: left;/* 水平方向（左） */
background-position: center;/* 水平方向（中央） */
background-position: right;/* 水平方向（右） */

/* px値 */
background-position: 30px 60px;/* 左から30px、上から60pxの位置に表示 */
background-position: bottom 20px right 10px;/* 下から20px、右から10pxの位置に表示 */

/* %値 */
background-position: 30% 60%;/* 左から30%、上から60%の位置に表示 */
background-position: bottom 20% right 10%;/* 下から20%、右から10%の位置に表示 */