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

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

기술자료

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

페이지 정보

댓글 0건 조회 2,216회 작성일 16-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 166건 1 페이지
기술자료 목록
번호 제목
166 HTML
웹브라우저 언어설정 코드 (wr.2018-03-28) Hit.278
165 HTML
164 HTML
163 HTML
162 HTML
ul 영역에 40px 여백 생길때 (wr.2017-12-18) Hit.672
161 HTML
160 HTML
159 HTML
158 HTML
157 HTML
156 HTML
155 HTML
checkbox 타입 readonly 적용 (wr.2017-04-18) Hit.1221
154 HTML
153 HTML
152 HTML
151 HTML
HTML Anchors with 'name' or 'id'? (up.2016-12-27) Hit.1748
열람중 HTML
149 HTML
[CSS] div 고정폭 + 가변폭 (up.2016-09-20) Hit.2801
148 HTML
[CSS] :before , :after 가상요소 (wr.2016-09-03) Hit.2601
147 HTML
146 HTML
145 HTML
[CSS] div 이미지 공백 없애기 (wr.2016-08-09) Hit.2962
144 HTML
[CSS] li height 높이 변경 (wr.2016-08-09) Hit.3246
143 HTML
142 HTML
[CSS] DIV에 UL 가운데 정렬 (wr.2016-08-06) Hit.2718
게시물 검색

회원로그인

접속자집계

오늘
275
어제
3,054
최대
3,099
전체
3,914,150

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