CSS background-size

background-size syntax은 다음과 같다.

<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain 
<length-percentage> = <length> | <percentage>

 

background-size는 백그라운드로 적용할 부분의 크기를 지정한다. 박스 사이즈 지정과 같이 width, height를 주면 된다. 단, 박스 크기는 이미 정해져 있고 그 배경으로 사용할 것이기 때문에 배경의 크기가 박스 크기를 넘으면 보이지 않는다.

cover, contain을 사용해도 되나 제공하지 않는 브라우저 버전이 있으므로 width, height 형태로 명시적으로 적어주는 것이 낫다.

 

auto: 원본의 크기로 설정됨.

length: 1px 이나 100% 같은 수치로 입력

 

default 값은 auto auto이다. 즉, 원본의 크기가 사용된다. 배경이 들어갈 박스크기보다 해당 크기가 크다면 나머지 부분은 다 잘린다.

10px같이 하나의 값만 지정하면 높이는 auto가 된다.

 

width, height를 지정하면 해당 이미지가 그 크기로 축소되어 배경으로 들어간다.

 

예시)

<div> </div> 

div: 500px 500px

배경사진: 1000px 500px

 

배경사진을 500px 500px에 넣으려면 background-size:100% 100%; 로 지정하면 500px 500px 로 축소된후 들어간다.

background-size: 50% 100%로 지정하면 어떻게 될까? div영역의 50% 100%만 사용하도록 배경사진이 250px 500px이 되어서 들어간다. 

즉, %를 사용하면 박스에서 얼만큼의 부분에 배경을 적용할지 고르는 셈이다.