background-size 속성

by 조쉬 posted Dec 23, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
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;
 
이미지의 너비와 높이 비율은 유지됨.
요소의 너비나 높이 중에 큰값에 배경을 맞춤.
(화면을 꽉 채우고 싶을때 사용 / 이미지의 일부는 잘려서 안보일수 있음)