[HTML/CSS] 배경 이미지 넣는 방법(background-image) 총정리

웹 사이트를 꾸미다 보면 때로는 배경에 단순히 배경에 색을 넣는 것보다는 이미지를 넣어 디자인을 하는 것이 필요한 경우가 있습니다. CSS의 background-image 속성을 사용하면 웹에서 사용이 가능한 jpg나 gif, png 파일을 사용하여 배경 이미지를 설정할 수 있으며, 다양한 크기의 이미지를 스케일링하여 사용할 수 있습니다. 이번 포스팅에서는 웹 문서의 배경에 이미지를 설정하는 방법에 대해 알아보도록 하겠습니다.

 

 배경 이미지 지정하기 (background-image) 

body {background-image : url('이미지 URL');}
#area {background-image : url('이미지 URL');}
.area {background-image : url('이미지 URL');}

배경 이미지를 지정하고 싶다면 위와 같이 배경 이미지를 넣을 요소를 특정하고 background-image에 삽입하고 싶은 이미지의 URL을 넣으면 됩니다. http://로 시작하는 절대경로를 사용할 수도 있고 웹 문서를 기준으로 상대경로를 지정하실 수도 있습니다.

 

See the Pen 배경 이미지 지정하기1 by wjdxo513 (@wjdxo513) on CodePen.

 

웹 문서 전체에 배경 이미지를 지정하려면 위와 같이 body에 background-imag 속성을 지정하시면 됩니다. 다만 위의 예제에서 확인이 가능하듯 배경 이미지의 크기가 배경을 채우려는 요소보다 작은 경우, 기본적으로 반복해서 적용되며 빈 공간을 채우게 됩니다.

 

 

배경 이미지 반복 설정하기(background-repeat)

• background-repeat : repeat : 화면에 가득 찰 때까지 배경 이미지를 반복합니다.
• background-repeat : repeat-x : 화면에 가득 찰 때까지 배경 이미지를 가로로 반복합니다.
• background-repeat : repeat-y : 화면에 가득 찰 때까지 배경 이미지를 세로로 반복합니다.
• background-repeat : no-repeat : 배경 이미지를 반복하지 않고 한 번만 표시합니다.

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

bckground-repeat 속성을 사용하면 배경 이미지를 반복하지 않도록 설정하거나 가로 반복이나 세로 반복만 하도록 설정할 수 있습니다. 보통 no-repeat 값을 많이 사용하여 이미지가 반복되지 않도록 많이 합니다.

 

 

배경 이미지 크기 조절하기(background-size)

• background-size : auto : 원래 이미지 크기만큼 배경에 표시됩니다.
• background-size : contain : 요소 안에 배경 이미지가 다 들어가도록 이미지를 자동으로 확대 / 축소합니다.
• background-size : cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 / 축소합니다.
• background-size : [크기값] : 배경 이미지의 크기를 지정합니다. (너비만 지정할 경우 높이를 자동 계산)
• background-size : [백분율] : 배경 이미지가 들어갈 요소 기준으로 백분율 값을 지정합니다.

See the Pen 배경이미지 지정하기2 by wjdxo513 (@wjdxo513) on CodePen.

 

위와 같이 배경 이미지의 크기를 개발자가 직접 지정할 수도 있습니다. 이렇게 이미지를 배경으로 지정하면 이미지가 깨질 염려가 적기 때문에 웹 페이지에 이미지를 자연스럽게 삽입하는 기법으로도 사용됩니다.

 

 

배경 이미지 위치 조절하기(background-position)

• background-position : [수평위치] [수직 위치]
• 수평위치 : left, center, right, 백분율, 길이값
• 수직위치 : top, center, bottom, 백분율, 길이값

See the Pen 배경이미지 지정하기4 by wjdxo513 (@wjdxo513) on CodePen.

 

위와 같이 background-position 속성을 활용하여 배경 이미지의 위치를 조정할 수도 있습니다.