▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여

▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여

---

CSS의 background-size 속성을 이용하면 큰이미지를 작게하여 배경에 반복하여 배치하거나, 작은 이미지를 확대하여 배경에 가득 채울 수 있다. 이에대해 이글에서는 CSS background-size를 적용하는 몇가지 예시에 대해서 정리하고자한다. 이글에서 정리하는 내용목록은 다음과 같다.

CSS background-size 활용 예시

background-size의 활용 ① 배경이미지 크기 조정(변경)하기

background-size의 활용 ② 이미지 늘리기

background-size의 활용 ③ 작은 이미지 크게하기

background-size의 활용 ④ contain과 cover

background-size의 활용 ① ::  배경이미지 크기 조정(변경)하기

[클릭하면 큰 이미지로 보실 수 있습니다.]

위 사진에도 설명되어 있듯, 가로세로가 1000px인 아모레퍼시픽로고를 100x100으로 줄인후, 200x200크기의 element에 적용했다. 이러한 설정의 결과로 100x100크기로 줄어든 4개의 아모레퍼시픽 로고가 출력된다.

background-size의 활용 ② :: 이미지 늘리기

[클릭하면 큰 이미지로 보실 수 있습니다.]

background-size 속성에 가로, 세로 값을 직접입력하는 방법으로 이미지를 의도적으로 늘려서 출력할 수 있다. 이는 [배경화면 변경설정]에 있는 '늘이기'옵션기능을 떠올리면 이해가 쉽다.

background-size의 활용 ③ :: 작은 이미지 크게하기

[클릭하면 큰 이미지로 보실 수 있습니다.]

마찬가지로 background-size속성을 이용하여 작은 이미지임에도 크게 확대하여 출력할 수 있다. ①번예제와  ②번예제에서 사용했던 아모레퍼시픽 로고파일의 크기는 1000x1000 이었지만, 이 예제에서는 50x50 크기의 로고파일을 사용했다. 즉, 가로세로 50픽셀의 이미지를 background-size로 500px을 적용함으로써 화면에는 500픽셀의 크기로 출력되도록 한 것이다.

결과는 [바탕화면 설정]에서 작은 이미지를 '채우기'옵션으로 적용했을때의 모습과 비슷하다. 이 기능을 사용할 때에는, 작은이미지를 임의로 확대했을때그래픽 품질이 감소된다는 점을 고려해야한다.

background-size의 활용 ④ :: contain과 cover

background-size 속성으로, 길이를 나타내는 <length>값 대신에 contain과 cover라는 두개의 값을 지정할 수 있다. 이 두 개의 옵션중 먼저 'contain'에 대해서 살펴보자

background-size : contain 

속성 값을 contain으로 지정하게되면, 배경 이미지의 가로/세로 길이 모두 요소 안에 들어온다라는 조건 하에 배경이미지를 크게 조정하게된다. 이때 가로/세로 비율도 유지된다.  결국, 배경이미지의 크기는 항상 요소의 크기보다 작거나 같다.

background-size : cover

속성 값을 cover로 지정하면 배경 이미지의 가로/세로 길이 모두 요소 보다 크다라는 조건하에 가능한한 배경이미지를 작게 조절한다. 이때 가로/세로 비율도 유지된다. 결국, 배경이미지의 크기는 항상 요소의 크기보다 크거나 같다.

background-size 속성에 대한, contain과 cover 기능 비교정리

	조건	기능	결과
background-size:contain	배경이미지의 가로/세로길이 모두  요소안에 들어오도록 한다.	배경 이미지를 크게한다.	배경이미지의 크기는 항상   요소의 크기보다 작거나 같다.
background-size : cover	배경이미지의 가로/세로 길이 모두  요소보다 크게한다.	배경 이미지를 작게한다.	배경이미지의 크기는 항상  요소의 크기보다 크거나 같다.

위 사진은 동일한 이미지파일(1000x1000)을 사용하여 동일한 조건에서 contain과 cover에 적용후 출력결과를 나란히 캡쳐한 것이다. 이 두 기능은 이렇게 활용법이 다르지만, 이에대한 이해가 충분히 이루어지지않은 경우가 많기때문에, 꼼꼼하게 이해해둘 필요가 있다.

참고내용

---

MDN, '배경이미지크기조정하기', url:"https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images"

​