CSS background image 꽉차게 적용시키는 방법

div같은 블록박스 요소안에 백그라운드 이미지를 꽉 차게 적용하는 방법이 두 가지가 있습니다. 이미 예전에 이 부분은 잘 정리를 해두었기 때문에 본문에서는 한번 더 부족한 설명 부분을 언급하는 정도로 진행하려고 합니다. 아래의 글을 먼저 정독해 주시기 바랍니다.

 

CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여

CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여

위의 글을 읽어보시면 백그라운드 이미지를 꽉차게 적용시키는 방법은 cover라는 옵션을 사용해야 한다는 것을 확인할 수 있습니다. 즉 CSS 백그라운드 이미지에 꼭 필요한 요소는 다음과 같습니다.

 

background-image: url('이미지 주소');
background-size: cover;
background-position: center;

 

background-position의 경우는 기준이 왼쪽 상단 모서리인데 이것을 이미지의 정 가운데로 맞춰주는 속성입니다. 보통 백그라운드 이미지를 cover로 사용하는 경우는 이 속성이 따라갑니다. 그렇다면 cover의 성격에 대해 좀 더 자세히 알아볼 필요가 있을 것 같습니다. 아래의 코드펜에 나와있는 예제를 확인해 보겠습니다.

 

See the Pen CSS : background-image / cover by rgy0409 (@rgy0409) on CodePen.

 

 

div 요소를 총 7개 그룹으로 만들어놨으며 번호를 매겨놨습니다. 그리고 각 div의 크기는 다릅니다. 또한 각 div의 백그라운드에 이미지를 심어놓았습니다. 이미지 속성은 모두 cover로 되어 있습니다. HTML과 CSS 코드를 직접 확인해 보시면 이해에 도움이 되실 것입니다.

 

고양이 이미지의 크기는 430x287px 입니다. 위의 네개의 div 중 1번 div의 크기는 정확히 가로 430px, 세로 287px입니다. 따라서 고양이 사진이 어느 곳 하나 이미지가 깨지는 곳 없이 선명하게 정상적으로 출력되고 있음을 알 수 있습니다. 이미지 크기대로 100% 정확하게 나오고 있습니다. 그러므로 1번 div는 더 이상 설명은 따로 하지 않겠습니다.

 

반면 2번 div부터는 이미지 사이즈와 다른 크기로 만든 상황입니다. 2번부터 4번까지는 이미지보다 큰 div 입니다. 2번 div는 세로 크기를 이미지 크기보다 좀 더 크게 만들었고 3번 div는 가로 크기를 좀 더 크게 만들었습니다. 4번 div의 경우는 반응형 div로 만들었습니다. 그래서 가로가 100%의 크기를 가지고 있습니다. 5번부터 7번까지는 원본 이미지보다 작은 div로 구성한 경우입니다. 5번 div는 가로 크기가, 6번 div는 세로 크기가, 7번 div는 가로 및 세로 모두 크기가 이미지보다 작습니다.

 

2번부터 7번까지 div에 적용된 이미지들을 살펴보시면 한 눈에 알 수 있듯 빈 틈 없이 div 안쪽에 고양이 이미지가 백그라운드 적용이 되어있음을 알 수 있습니다. 다만 역시 원본 사이즈가 아닌 div의 경우는 이미지의 왜곡이 발생한다는것도 확인 됩니다. 당연한 상황입니다. 비트맵 이미지 특성상 원래 사이즈에서 크기를 늘리면 픽셀이 깨집니다. 그렇기에 2번부터 4번까지의 div에 적용된 고양이 이미지는 이미지가 선명하지 않습니다. 원본 이미지보다 커졌기 때문입니다. 5번부터 7번까지의 div도 원본 사이즈보다 작아지기 때문에 커지는 것 대비 이미지가 깨지는 경우가 아니라 다행이긴 하지만 왜곡이 생기는건 어쩔 수 없는 부분입니다. 원래 크기의 비트맵이 가지는 1px당 색상 정보가 압축되기 때문입니다. 끝.