깔끔하고 센스있는 배경이미지: #2 background-size

지난 포스트에서 background-repeat 속성을 알아보며, 배경 이미지 반복을 조절하는 법을 알아보았다.

이전 포스팅 ─
깔끔하고 센스있는 배경이미지: #1 background-repeat

반복을 없앴으니, 나머지 여백을 처리할 시간이다. 나는 배경 이미지가 남는 여백을 꽉 채우도록 만들고 싶은데... 어떻게 할 수 있을까?

background-size

배경 이미지의 사이즈는 background-size 속성을 통해 조절할 수 있다. 이 속성에 값을 지정하지 않을 경우 default 값은 auto로, 배경 이미지가 가진 고유의 크기로 출력된다.

1. contain

• contain
  background-size: contain;은 배경 이미지를 자르거나 늘리지 않고, 요소 안에서 최대한 크게 보일수 있도록 조정한다.

contain

2. cover

• cover
  background-size: cover;는 이미지의 비율을 유지하면서 화면을 꽉 채우도록 크기를 조정한다.

이 때 이미지의 가로 세로 비가 1:1이 아니라면, 가로 혹은 세로에 이미지를 맞추며 비율이 망가지지지 않게 확대하여 화면을 채운다.

뷰포트가 세로로 길다면 이미지의 상하부가 잘리지 않지만, 가로로 잘라 화면을 채운다.

뷰포트가 가로로 길다면 이미지의 좌 우가 잘리지 않지만, 세로로 잘라내 화면을 채운다.

3. %, px, em, rem ... 길이값

• 길이 값 지정
  background-size 단위를 이용해 직접 값을 지정해줄 수 있다.

contain이나 cover를 사용하지 않고, 직접 너비와 높이 값을 지정해줄 수도 있다.

맺으며

배경 이미지가 반복되지 않은 채, 화면을 꽉 채우기 위해서는 background-size: cover; 속성을 부여하면 된다는 것을 알게 되었다. 하지만... 이미지의 윗 부분은 그림보다 여백이 많아서 썰렁해보인다. 배경 이미지의 위치를 좀 이동할 수는 없을까?

이럴 때를 위해 존재하는 속성, background-position이 있다. 다음 포스팅에서는 background-position과 함께, background-attachment 속성을 알아보자.

앗뇽!

다음 포스팅 ─
깔끔하고 센스있는 배경이미지: #3 background-postion, attachment