[CSS] background-image position : 위치 지정 > 기술자료 | 해피정닷컴

[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 2,640건 41 페이지
  • RSS
기술자료 목록
1840
JavaScript   12064  2016-10-11 22:39  
1839
WordPress   10378  2016-10-10 16:28  
1838
영카트   11294  2016-10-10 12:48 ~ 2019-04-14 23:00  
1837
PHP   34938  2016-10-06 22:14 ~ 2018-03-30 14:01  
열람
HTML   13970  2016-10-06 11:49  
1835
제로보드   14670  2016-09-30 16:32 ~ 2022-04-15 19:45  
1834
WordPress   17122  2016-09-30 00:40  
1833
WordPress   9412  2016-09-30 00:28 ~ 2020-08-28 12:11  
1832
호스팅   20238  2016-09-26 23:00 ~ 2017-06-05 00:00  
1831
JavaScript   14884  2016-09-22 08:49 ~ 2021-10-19 18:54  
1830
JavaScript   15288  2016-09-19 19:47  
1829
JavaScript   27976  2016-09-19 18:52  
1828
그누보드   16276  2016-09-12 16:29 ~ 2021-02-26 16:55  
1827
Editor   9744  2016-09-10 11:11  
1826
JavaScript   13385  2016-09-09 02:51  
1825
HTML   14168  2016-09-09 00:58 ~ 2016-09-20 00:00  
1824
JavaScript   17777  2016-09-08 00:17  
1823
JavaScript   13052  2016-09-07 16:25 ~ 2016-09-08 00:00  
1822
그누보드   15778  2016-09-06 12:59 ~ 2022-04-18 15:02  
1821
Search   14253  2016-09-06 11:59  

검색

해피정닷컴 정보

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

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