[CSS] background-size

See the Pen [CSS3] background-size by mill (@millfeel) on CodePen.

값

background-size: 25px 50px;

• 기본 값은 auto auto이고, 이미지를 비율에 맞게 늘린다.
• 값이 하나인 경우: 너비 값에 적용되고, 높이 값은 auto가 된다.
• 값이 두개인 경우: 첫번째 값은 너비, 두번째 값은 높이가 적용된다.
• 여러 배경 이미지의 크기를 지정하려면 각각의 값을 쉼표로 구분한다.

---

키워드

background-size: cover/contain;

[cover]

• 이미지가 잘려도 이미지를 최대한 크게 조정한다.
• 빈 공간이 남지 않는다.

[contain]

• 이미지가 잘리지 않는 기준에서 가장 크게 이미지를 조정한다.
• 빈 공간이 남는다.

---

[공부 좌표]

background-size