「background-position」背景設定

背景画像の背景レイヤーに対する初期の相対位置を指定するプロパティです。位置指定の値は下記となります。

center

background-position: center; /*中央に表示*/

body {
    background-image: url("background_sample.gif");
    background-position: center;
    background-repeat: no-repeat;
}

left

background-position: left; /*左に表示*/
background-position: left center; /*同様の結果を表示。*/

body {
    background-image: url("background_sample.gif");
    background-position: left;
    background-repeat: no-repeat;
}

top

background-position: top; /*上に表示*/
background-position: center top; /*同様の結果を表示。*/

body {
    background-image: url("background_sample.gif");
    background-position: top;
    background-repeat: no-repeat;
}

right

background-position: right; /*右に並べる。*/

body {
    background-image: url("background_sample.gif");
    background-position: right;
    background-repeat: no-repeat;
}

bottom

background-position: bottom; /* 下部に表示*/

body {
    background-image: url("background_sample.gif");
    background-position: bottom;
    background-repeat: no-repeat;
}

percentage

background-position: 50% 50%; /*centerと同様の結果を表示。*/

body {
    background-image: url("background_sample.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

length(pixel)

background-position: 15px 30px; /*左上から右に15px, 下に30px*/

body {
    background-image: url("background_sample.gif");
    background-position: 15px 30px;
    background-repeat: no-repeat;
}