[CSS] background-image position : 위치 지정 > 온라인강의

본문 바로가기
 
 
 
오늘 1,601
어제 2,203
최대 2,526
전체 3,262,916

최근 방문자

994
927
1806
2341
2203
1601
25 26 27 28 29 30
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

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

페이지 정보

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

본문

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 1,945건 1 페이지
온라인강의 목록
번호 제목
1945
Search SEO 최적화 메타 구성하기 (update.2017-03-29)  Hit.23
1944
JSP alert 창 띄우기 (write.2017-03-29)  Hit.24
1943
JSP MSSQL 접속설정하기 (write.2017-03-29)  Hit.29
1942
그누보드 [G5] 전체쪽지 보내기 (write.2017-03-29)  Hit.22
1941
1940
Adobe Adobe CS3~CC 프로그램 완전삭제 (write.2017-03-21)  Hit.130
1939
1938
JSP utf-8 한글깨짐 (write.2017-03-20)  Hit.139
1937
1936
1935
1934
1933
그누보드 [G5] 게시물 순서 바꾸기 (write.2017-03-16)  Hit.189
1932
전자결제 [PayPal] PHP 결제연동 (write.2017-03-15)  Hit.186
1931
전자결제 [PayPal] ASP 결제 연동 (write.2017-03-15)  Hit.182
1930
1929
1928
JSP Service Temporary Unavailable! (write.2017-03-13)  Hit.199
1927
그누보드 [G5] [최신글] 한줄소식 (write.2016-02-19)인기글첨부파일  Hit.1717
1926
1925
1924
1923
1922
일반 FireFox 플러그인 (write.2015-02-28)인기글  Hit.2079
1921
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기