CSS 배경 이미지 완벽 가이드: 기본 문법부터 실전 활용까지

CSS의 background-image 속성을 사용하면 웹사이트의 배경을 이미지로 설정할 수 있습니다. 배경 이미지는 background-image: url(이미지_주소) 형태로 지정하며, 이 속성을 활용하면 여러 개의 배경 이미지를 겹쳐서 사용하는 것도 가능합니다.

배경 이미지는 현대적인 웹사이트에서 시각적으로 매력적인 사용자 경험을 만들기 위해 널리 사용되는 요소입니다. 웹 디자이너는 CSS의 background-image 속성을 통해 사이트의 고유한 테마에 맞게 배경을 자유롭게 연출할 수 있습니다.

이 글에서는 다양한 예제와 함께 CSS 배경 이미지 속성의 사용법을 단계별로 살펴봅니다. 끝까지 읽고 나면 배경 이미지를 전문가처럼 다룰 수 있게 될 것입니다.

CSS 배경 이미지란?

background-image 속성은 웹 페이지의 특정 요소에 이미지를 배경으로 지정하는 기능입니다. 주로 페이지 전체 또는 특정 섹션의 배경을 설정할 때 사용됩니다.

웹 페이지를 디자인할 때는 최종 결과물에 배경 이미지를 사용할지 여부를 먼저 결정해야 합니다.

예를 들어 '회사 소개' 페이지를 디자인한다면 팀원들의 단체 사진을 배경으로 넣을 수 있습니다. 카페 웹사이트를 만든다면 커피 한 잔이 담긴 이미지를 헤더 배경으로 활용하는 것도 좋은 방법입니다.

background-image 속성은 HTML 요소에 이미지를 배경으로 추가합니다. 다음과 같은 문법으로 사용할 수 있습니다:

background-image: url(이미지URL);

여기서 이미지URL은 화면에 표시하고 싶은 이미지 파일의 위치(경로)를 의미합니다.

CSS 배경 이미지 예제

'더 커피 그라인드(The Coffee Grind)'라는 동네 카페를 위한 웹사이트를 디자인하는 프로젝트를 진행한다고 가정해 보겠습니다. 카페 측에서는 상단 배너에 커피 한 임이 담긴 스톡 이미지를 배경으로 넣고, 배너 중앙에는 "Welcome to The Coffee Grind"라는 문구를 표시해 달라고 요청했습니다.

다음 코드로 이 배너를 만들 수 있습니다:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

위 코드를 실행하면 다음과 같은 결과가 나타납니다:

코드를 하나씩 살펴보겠습니다. HTML 파일에서는 class가 "image"인 <div> 태그 안에 "Welcome to The Coffee Grind"라는 문구를 담은 <p> 태그(class="header")를 작성했습니다.

CSS 파일에서는 "image" 클래스에 대한 규칙을 정의하여 배너의 배경 이미지를 설정하고 높이를 250px로 지정했습니다. 그리고 "header" 클래스를 정의하여 헤더 텍스트의 스타일을 꾸몄습니다.

"header" 클래스는 헤더 텍스트 위쪽에 50px의 패딩을 적용하고, 텍스트 색상을 흰색으로, 글자 크기를 20px로 설정하며, 텍스트를 요소의 가운데 정렬합니다.

CSS 다중 배경 이미지

background-image 속성을 사용하면 하나의 요소에 여러 개의 배경 이미지를 지정할 수 있습니다. 다중 배경 이미지의 문법은 다음과 같습니다:

background-image: url(이미지1), url(이미지2);

먼저 지정된 이미지가 요소의 맨 앞에 표시되고, 이후에 지정된 이미지들은 차례대로 뒤에 겹쳐집니다. 예를 들어 배너 앞쪽에 커피잔 아이콘을 추가하고 싶다면 다음과 같이 코드를 작성할 수 있습니다:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

실행 결과:

위 결과에서 볼 수 있듯이 커피잔 아이콘이 배경 이미지 앞에 추가되었습니다. 아이콘이 맨 앞에 보이는 이유는 배경 이미지 목록에서 첫 번째로 지정했기 때문입니다.

배경 이미지 크기 조절

background-image 속성을 사용할 때 컨테이너 안에서 배경 이미지의 크기를 조절하고 싶을 때가 있습니다. 이럴 때는 background-size 속성을 사용합니다.

background-size 속성은 다음 네 가지 값을 가질 수 있습니다:

auto: 웹 브라우저가 배경 이미지에 가장 적합한 크기를 스스로 결정합니다. (기본값)
contain: 이미지가 컨테이너를 가득 채우지 못하더라도 이미지 전체가 보이도록 합니다. 이미지가 컨테이너보다 작으면 원래 크기 그대로 표시되며, 남는 공간은 여백으로 처리됩니다.
cover: 이미지를 늘려서 컨테이너 전체를 덮도록 합니다.
length(크기 값): 배경 이미지의 너비와 높이를 직접 지정합니다. 첫 번째 값은 너비, 두 번째 값은 높이를 설정합니다.

배경 크기 변경하기

앞서 만든 커피 배너 이미지가 요소 안에 온전히 들어가도록 설정하고 싶다고 가정해 보겠습니다. 즉, 이미지가 컨테이너를 가득 채우지 못하더라도 이미지 전체가 보이도록 하는 것입니다. 다음 코드로 구현할 수 있습니다:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

실행 결과:

첫 번째 예제와 달리 이번에는 배경 이미지 전체가 화면에 표시됩니다. 코드에서 background-size 속성을 지정하고 값을 contain으로 설정했기 때문입니다. 반대로 이미지가 컨테이너 전체를 덮게 하고 싶다면 cover 값을 사용하면 됩니다.

픽셀 단위로 크기를 직접 지정할 수도 있습니다. 예를 들어 이미지를 가로 200px, 세로 200px로 만들고 싶다면 다음과 같이 작성합니다:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

실행 결과:

이 예제에서 이미지는 가로 200px, 세로 200px 크기로 표시됩니다.

배경 이미지 위치 지정

background-origin 속성을 사용하면 배경 이미지를 웹 요소의 콘텐츠(content), 테두리(border), 패딩(padding) 영역을 기준으로 배치할 수 있습니다.

background-origin 속성이 받을 수 있는 값은 세 가지입니다:

border-box: 테두리 박스를 기준으로 이미지를 배치합니다.
content-box: 콘텐츠 박스를 기준으로 이미지를 배치합니다.
padding-box: 패딩 박스를 기준으로 이미지를 배치합니다. (기본값)

테두리, 콘텐츠, 패딩에 대해 더 자세히 알고 싶다면 CSS 박스 모델 관련 가이드를 참고하세요.

이번에는 이미지의 위치를 조정해 보겠습니다. 예를 들어 배경 이미지를 콘텐츠 박스를 기준으로 표시하려면 다음과 같이 코드를 작성합니다:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

실행 결과:

이 예제에서 배경 이미지는 콘텐츠 박스를 기준으로 표시됩니다. 이미지 테두리와 배경 이미지 사이에 흰 여백이 있는 것을 확인할 수 있는데, 이것이 바로 콘텐츠 박스를 기준으로 한 배경 이미지의 상대적 위치를 보여줍니다.

이는 background-origin: content-box 속성을 지정하여 구현했습니다. 또한 background-repeat: no-repeat 속성을 함께 지정하여 이미지가 콘텐츠 박스 안에 한 번만 표시되도록 제한했습니다. 이렇게 하면 이미지가 background-origin 속성으로 생긴 빈 공간에 반복되어 나타나지 않습니다.

마무리

CSS의 background-image 속성을 사용하면 요소의 배경을 이미지로 설정할 수 있습니다. 이 기법을 활용하면 단순한 색상이나 그라디언트 대신 이미지로 자유롭게 커스텀 배경을 만들 수 있습니다.

이번 글에서는 background-image 속성의 기본 사용법과 배경 이미지의 크기, 위치 등 스타일링 방법을 알아보았습니다. 이제 여러분도 전문가처럼 CSS 배경 이미지를 디자인할 준비가 되었습니다.