div style="
width: 296px;
height: 152px;
background-image: url('장나라');
-ms-behavior: url('/css/backgroundsize.min.htc');
background-size: cover;
background-repeat: no-repeat;
"></div>
2021년 01월 16일
●?Who's 똑띠
잡다한몽상백서 운영자입니다.
| 번호 | 분류 | 제목 | 조회 수 | 날짜 |
|---|---|---|---|---|
| 공지 | css 관련 참고 사이트를 소개 합니다. | 7045 | 2009.03.01 | |
| 공지 | [작성중] CSS강좌 목차 1 | 13474 | 2009.05.21 | |
| » | 강좌 | 백그라운드 채우기 1 | 7 | 2014.05.15 |
| 45 | 팁 | div 떠 있는 형태로 고정 (하단bar) | 17 | 2014.03.18 |
| 44 | 강좌 | href 속성에서 _blank 적용시 title에 새창으로 이동 명시 | 3929 | 2013.08.09 |
| 43 | vertical-align:middle; | 7127 | 2009.10.06 | |
| 42 | 배경을 고정할려면 | 4527 | 2009.07.16 | |
| 41 | 배경 png 투명하게 처리하기 | 7220 | 2009.05.05 | |
| 40 | css 선택자 | 7095 | 2009.04.20 | |
| 39 | ul,li,ol에 대한 이해 | 10591 | 2009.03.02 | |
| 38 | css !important | 6627 | 2009.03.01 | |
| 37 | css clear : none | left | right | both | 8794 | 2009.03.01 | |
| 36 | css style.display style.visibility | 10728 | 2009.03.01 | |
| 35 | css font 속성 | 7361 | 2009.03.01 | |
| 34 | css background 속성 | 14474 | 2009.03.01 | |
| 33 | css text 속성 | 6628 | 2009.03.01 | |
| 32 | css white-space | 6544 | 2009.03.01 | |
| 31 | CSS(Cascading Style Sheet)란? | 5692 | 2009.03.01 | |
| 30 | list-style | 6940 | 2009.03.01 | |
| 29 | css position 속성 | 11622 | 2009.03.01 | |
| 28 | span, div, filedset | 10716 | 2009.03.01 | |
| 27 | ul , li 속성에 대해서 | 13114 | 2009.03.01 |
background-size: auto;
원래 이미지 사이즈대로 사용됨.
박스에 크기를 주더라도 원래 이미지 사이즈대로 나타남.
background-size: 500px;
값이 하나만 있을경우 width 값으로 인식됨. height는 비율에 맞추어 auto로 나타남.
background-size: 500px 300px;
지정한 값대로 width는 500픽셀, height는 300픽셀로 나타남.
background-size: 50% auto;
박스값의 50%의 너비로 지정됨. 높이는 auto로 나타남.
background-size: 100%;
이미지의 너비와 높이비율을 박스 크기에 따라 100%로 맞춰줌
background-size: contain;
이미지의 너비와 높이 비율은 유지됨.
너비나 높이 중에 작은값을 배경에 맞춤.
background-size: cover;
이미지의 너비와 높이 비율은 유지됨.
너비나 높이 중에 큰값을 배경에 맞춤.
[출처] [CSS] background-size 정리|작성자 시에나