[CSS3] background-size 속성알아보기

background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다.

값은 px와 % 같은 단위로 쓸 수 있고, auto, cover, contain과 같은 키워드를 쓸 수도 있다.

*background-size의 지원 브라우저

internet Explorer : 버전9만 지원

firefox, chrome, safari, opera : yes

background-size: 가로크기 세로크기; 

기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기대로 처리한다.

1. background-size:x px y px;

가로 크기와 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정 된다

2. background-size:x % y%;

적용되는 요소의 크기에 비례하여 배경 이미지 적용

3. background-size:cover;

이미지 크기 비율을 그대로 유지한 상태에서 이미지가 들어 있는 엘리먼트의 가로 또는 세로에 이미지를 맞춘다.

(가로와 세로 중 큰 값에 맞춘다)

4. background-size:contain;

이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.(가로와 세로 중 큰 값에 맞춘다)