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

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

기술자료

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

페이지 정보

댓글 0건 조회 2,672회 작성일 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 165건 1 페이지
기술자료 목록
번호 제목
165 HTML
164 HTML
163 HTML
162 HTML
웹브라우저 언어설정 코드 ( write. 2018-03-28 ) Hit.546
161 HTML
160 HTML
159 HTML
158 HTML
ul 영역에 40px 여백 생길때 ( write. 2017-12-18 ) Hit.925
157 HTML
156 HTML
155 HTML
[CSS] li에 영역 전체에 링크 걸기 ( write. 2017-09-05 ) Hit.3216
154 HTML
CSS :link :visited :hover :active 셀렉터 ( write. 2017-07-27 ) Hit.1384
153 HTML
152 HTML
151 HTML
checkbox 타입 readonly 적용 ( write. 2017-04-18 ) Hit.1546
150 HTML
웹브라우저 상단에 메뉴 고정하기 ( write. 2017-01-03 ) Hit.2539
149 HTML
148 HTML
147 HTML
HTML Anchors with 'name' or 'id'? ( update. 2016-12-27 ) Hit.1976
열람중 HTML
[CSS] background-image position : 위치 지정 ( write. 2016-10-06 ) Hit.2673
145 HTML
[CSS] div 고정폭 + 가변폭 ( update. 2016-09-20 ) Hit.3223
144 HTML
143 HTML
[CSS] li height 높이 변경 ( write. 2016-08-09 ) Hit.3888
142 HTML
[CSS] 배경 이미지 크기 조정하기 ( update. 2017-04-14 ) Hit.3111
141 HTML
[CSS] DIV에 UL 가운데 정렬 ( write. 2016-08-06 ) Hit.3116
게시물 검색

회원로그인

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

접속자집계

오늘
1,764
어제
2,000
최대
3,174
전체
4,131,801

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