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

본문 바로가기
사이트 내 전체검색

기술자료

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

페이지 정보

댓글 0건 조회 3,279회 작성일 2016-10-06 11:49

본문

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 175건 1 페이지
기술자료 목록
번호 제목
175 HTML   44  2018-10-14 01:19 ~ 2018-10-14 02:09  
174 HTML   259  2018-08-30 15:47  
173 HTML   303  2018-08-27 14:33  
172 HTML   474  2018-08-26 14:07  
171 HTML   254  2018-08-18 05:37  
170 HTML   646  2018-08-17 06:39  
169 HTML   490  2018-08-15 05:06 ~ 2018-08-15 05:58  
168 HTML   198  2018-08-13 18:50  
167 HTML   326  2018-08-09 10:12 ~ 2018-08-09 13:26  
166 HTML   445  2018-07-23 02:20 ~ 2018-07-23 14:33  
165 HTML   262  2018-07-17 18:38  
164 HTML   317  2018-07-04 23:27  
163 HTML   458  2018-07-04 15:02  
162 HTML   996  2018-03-28 20:58  
161 HTML   913  2018-03-21 19:00  
160 HTML   3755  2018-03-08 19:40 ~ 2018-03-11 23:33  
159 HTML   2057  2018-02-27 05:31 ~ 2018-03-16 04:39  
158 HTML   1292  2017-12-18 22:36  
157 HTML   2048  2017-09-28 12:23 ~ 2018-10-09 09:17  
156 HTML   2202  2017-09-18 23:09  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
373
어제
2,445
최대
3,174
전체
4,327,105

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.