스타일시트 background-image position : 위치 지정속성
background-position
| background-position | |
|---|---|
| 값 | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] |
| 초기값 | 0% 0% |
| 상 속 | no |
| 적 용 | 블록레벨 요소와 대체 요소 |
포지션 값은 한번 또는 두번이 나올 수 있습니다.
1) 키워드
'키워드'의 기본값은 top left 입니다.
키워드는 다섯가지입니다. top, left, right, center, bottom.
이들 키워드는 두개의 방향을 나타나기만 하면 됩니다. 나타나는 순서는 상관이 없습니다.
만일 하나의 키워드만이 설정된다면 다른 하나는 'center'가 됩니다.
즉, background-position: top right; 나 background-position: right top;은 같습니다.
키워드는 다섯가지입니다. top, left, right, center, bottom.
이들 키워드는 두개의 방향을 나타나기만 하면 됩니다. 나타나는 순서는 상관이 없습니다.
만일 하나의 키워드만이 설정된다면 다른 하나는 'center'가 됩니다.
즉, background-position: top right; 나 background-position: right top;은 같습니다.
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: top right;
}
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: top right;
}
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right top;
}
즉,
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right top;
}
| 단일 키워드 | 동일한 값 |
| top | top center center top |
| left | left center center left |
| right | right center center right |
| center | center center |
| bottom | bottom center center bottom |
2) percentage
'percentage'의 기본값은 0% 입니다.
백분율을 사용할 경우에는 항상 수평 값이 먼저 옵니다.
background-position: 수평값 수직값
만약 백분율 값을 하나만 쓴 경우에는 무조건 주어진 하나의 값을 수평값으로 간주하고 수직값은 50%로 계산됩니다.
이미지를 가운데 위치하고 싶다면..
백분율을 사용할 경우에는 항상 수평 값이 먼저 옵니다.
background-position: 수평값 수직값
만약 백분율 값을 하나만 쓴 경우에는 무조건 주어진 하나의 값을 수평값으로 간주하고 수직값은 50%로 계산됩니다.
이미지를 가운데 위치하고 싶다면..
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 50% 50%
}
로 하면 됩니다.
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 50% 50%
}
로 하면 됩니다.
3) length
'length' 값은 '길이' 단위를 쓸 수 있습니다. 이것 역시 한가지 값만을 쓸 때에는 수평값으로 간주하고, 수직값은 50%로 계산됩니다.
'length' 는 음수, 양수 값이 가능합니다.
'length' 는 음수, 양수 값이 가능합니다.
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: -20px -20px;
}
로 표현이 가능합니다.background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: -20px -20px;
}
'length'는 백분율값과 같이 쓸 수도 있습니다.
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 20% -20px;
}
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 20% -20px;
}
DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right -20px;
}
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right -20px;
}
아래는 관련 댓글들입니다. 댓글수: 0
