[CSS] 배경 이미지 크기 조정하기 > 기술자료 | 해피정닷컴

[CSS] 배경 이미지 크기 조정하기 > 기술자료

본문 바로가기

사이트 내 전체검색

[CSS] 배경 이미지 크기 조정하기 > 기술자료

HTML [CSS] 배경 이미지 크기 조정하기

페이지 정보


본문

. 큰 이미지를 작게해서 반복하기
. 이미지 늘이기
. 작은 이미지를 크게하기
. 특별한 값: "contain"과 "cover"

CSS 이미지 비율유지, 최대크기로 cover
CSS 이미지 비율유지, 최대크기로 crop

/* Keywords syntax */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height set to 'auto') */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds values by background-image */
/* Do not confuse this with background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;


참고자료
https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
http://zetawiki.com/wiki/CSS_이미지_object-fit_cover 

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 42 페이지
  • RSS
기술자료 목록
1814
Search   14304  2016-09-06 11:59  
1813
HTML   15229  2016-09-03 18:38  
1812
Editor   33324  2016-08-26 22:27 ~ 2021-01-18 17:01  
1811
ClassicASP   11472  2016-08-18 11:57  
1810
HTML   14945  2016-08-10 16:38  
1809
HTML   13098  2016-08-09 14:29  
1808
HTML   18014  2016-08-09 11:33  
1807
HTML   18849  2016-08-09 00:33  
열람
HTML   13936  2016-08-09 00:29 ~ 2017-04-14 00:00  
1805
HTML   13768  2016-08-06 17:41 ~ 2018-08-01 07:10  
1804
그누보드   13025  2016-07-26 17:10 ~ 2020-09-26 09:26  
1803
그누보드   12682  2016-07-25 15:14  
1802
그누보드   18208  2016-07-21 20:47 ~ 2021-07-30 16:18  
1801
그누보드   14942  2016-07-13 02:16 ~ 2018-07-06 09:57  
1800
Adobe   61399  2016-06-30 13:18  
1799
Adobe   34085  2016-06-30 13:15 ~ 2018-07-22 21:58  
1798
WindowsServer   23156  2016-06-27 23:36  
1797
영카트   10166  2016-06-27 14:04  
1796
영카트   12236  2016-06-27 13:48  
1795
MySQL   21519  2016-06-25 01:57  

검색

해피정닷컴 정보

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

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