[CSS] 배경 이미지의 위치 설정～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;
}

스폰서 링크