[CSS3] background-size 속성 사용법

 

 

[CSS3] background-size 속성 사용법 

 

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

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

 

 

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

 

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

 

background-size:auto 400px;   가로 크기를 auto로 설정하고 세로 크기를 400px로 설정하면 이미지의 세로 크기가 400px로 바뀌고 가로크기는 세로크기 대비 원본 비율에 맞추어 바뀐다.

 

background-size:450px 270px;   가로 크기와 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정 된다.(이미지의 가로/세로 비율이 달라져 왜곡이 생기더라도 강제적으로 크기를 맞춘다.)

 

background-size:cover;   cover로 설정하면 이미지의 가로/세로 비율은 고정되고, 가로 크기가 요소의 가로 크기로 맞추어진다. (가로크기=요소 가로크기) 세로크기가 요소의 세로 크기보다 크면 아래가 감추어져 화면에는 보이지 않는다.

 

background-size:contain;   contain으로 설정하면 이미지의 가로/세로 비율은 고정되고, 세로 크기가 요소의 세로 크기로 맞추어진다. (세로크기=요소의 세로크기) 가로 크기가 요소의 가로 크기보다 작으면 가득 채우지 않고 비워진다.