[CSS] background-image position : 위치 지정 > 기술자료

본문 바로가기

사이트 내 전체검색

[CSS] background-image position : 위치 지정 > 기술자료

HTML [CSS] background-image position : 위치 지정

페이지 정보


본문

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 

댓글목록

등록된 댓글이 없습니다.


Total 200건 3 페이지
  • RSS
기술자료 목록
160
HTML   16156  2017-09-28 12:23 ~ 2019-10-10 23:30  
159
HTML   31364  2017-09-18 23:09  
158
HTML   28459  2017-09-05 04:39  
157
HTML   12027  2017-07-27 11:39  
156
HTML   12642  2017-07-10 14:33  
155
HTML   33871  2017-04-19 21:50  
154
HTML   11385  2017-04-18 11:48  
153
HTML   10886  2016-12-06 02:42  
152
HTML   12070  2016-11-24 16:58  
151
HTML   9409  2016-11-15 03:17 ~ 2016-12-27 00:00  
열람
HTML   14244  2016-10-06 11:49  
149
HTML   14508  2016-09-09 00:58 ~ 2016-09-20 00:00  
148
HTML   15680  2016-09-03 18:38  
147
HTML   15422  2016-08-10 16:38  
146
HTML   13397  2016-08-09 14:29  
145
HTML   18425  2016-08-09 11:33  
144
HTML   19227  2016-08-09 00:33  
143
HTML   14275  2016-08-09 00:29 ~ 2017-04-14 00:00  
142
HTML   14099  2016-08-06 17:41 ~ 2018-08-01 07:10  
141
HTML   18046  2016-02-21 06:31  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2025 해피정닷컴. All Rights Reserved.