background-position
값 [<percentage> | <length>]{1,2} |
[top | center | bottom] || [left | center | right]
초기값 0% 0%
상 속 no
'background-position' 속성은 배경 이미지의 시작 위치를 지정합니다.
포지션 값은 한번 또는 두번이 나올 수 있습니다.
1) 키워드
'키워드'의 기본값은 top left 입니다.
키워드는 다섯가지입니다. top, left, right, center, bottom.
이들 키워드는 두개의 방향을 나타나기만 하면 됩니다. 나타나는 순서는 상관이 없습니다.
만일 하나의 키워드만이 설정된다면 다른 하나는 'center'가 됩니다.
즉, background-position: top right; 나 background-position: right top;은 같습니다.
2) percentage
'percentage'의 기본값은 0% 입니다.
백분율을 사용할 경우에는 항상 수평 값이 먼저 옵니다.
background-position: 수평값 수직값
만약 백분율 값을 하나만 쓴 경우에는 무조건 주어진 하나의 값을 수평값으로 간주하고 수직값은 50%로 계산됩니다.
이미지를 가운데 위치하고 싶다면..
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 50% 50%
3) length
'length' 값은 '길이' 단위를 쓸 수 있습니다. 이것 역시 한가지 값만을 쓸 때에는 수평값으로 간주하고, 수직값은 50%로 계산됩니다.
'length' 는 음수, 양수 값이 가능합니다.
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: -20px -20px;
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right -20px;
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: -50% 100%;
참고사이트
http://www.albumbang.com/board/board_view.jsp?board_name=free&no=135
'Web' 카테고리의 다른 글
DIV로 텍스트 가로세로 가운데정렬 (html5만 크로스브라우징 가능) (0) | 2017.06.07 |
---|---|
[모바일] 브라우저 정보로 홈페이지 이동하기 (0) | 2017.06.06 |
NAV 태그와 CSS를 이용한 네비게이션 메뉴 만들기 (0) | 2017.06.03 |
[RGB COLOR CHARTS] PINK 핑크 (0) | 2017.06.02 |
div 이미지 공백 없애기 (0) | 2017.06.02 |