[CSS] background-size 속성 및 IE8 이하 브라우저 대응

 

 

 

background-size: auto; /* 기본값, 이미지 원본 크기 */
background-size: auto 500px; /* 가로를 auto, 세로를 원하는 크기로 지정하면 세로 크기에 따라 가로 크기는 자동으로 원본 비율에 맞게 변경됨 */
background-size: 500px auto; /* 가로 크기에 따라 세로 크기는 자동으로 원본 비율에 맞게 변경됨 */
background-size: 500px 300px; /* 가로, 세로 모두를 원하는 크기로 지정할 수 있음 */
background-size: cover; /* 이미지의 가로와 세로 중 크기가 더 큰 쪽에 맞추어 이미지 비율을 유지하며 배경 영역을 덮을 수 있음 */
background-size: contain; /* 이미지의 가로와 세로 중 크기가 더 작은 쪽에 맞추어 비율을 유지하며 배경 영역을 덮을 수 있음 */

 

background-size 속성은 IE9 이상의 브라우저에서 지원됩니다.

 

 

---

 

IE8 이하 브라우저에서 background-size 적용 방법

 

background: url('이미지경로') no-repeat;
background-size: cover; /* 원하는 배경 이미지 사이즈 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='이미지경로', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='이미지경로', sizingMethod='scale')";