CSS의 background-image 속성은 HTML 요소의 배경에 이미지를 설정할 때 사용합니다. 이 속성을 활용하면 페이지 전체 배경뿐만 아니라 특정 요소에도 원하는 이미지를 적용할 수 있습니다.
기본 문법
background-image 속성은 url() 함수를 통해 이미지 파일의 경로를 지정하는 방식으로 사용합니다.
selector {
background-image: url("이미지 경로");
}예제
다음 코드는 웹 페이지 전체(body)에 배경 이미지를 적용하는 예제입니다. 직접 실행해 보면서 background-image 속성의 동작 방식을 확인해 보세요.
<html>
<head>
<style>
body {
background-image: url("/latest/inter-process-communication.png");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>함께 알아두면 좋은 팁
배경 이미지가 로드되지 않거나 표시되지 않는 경우를 대비해 background-color 속성을 함께 지정하는 것이 좋습니다. 위 예제에서도 회색(#cccccc) 배경색을 함께 설정하여, 이미지가 없을 때도 자연스럽게 표시되도록 했습니다.
또한 배경 이미지는 기본적으로 반복되어 채워집니다. 반복을 제어하려면 background-repeat, 크기를 조절하려면 background-size, 위치를 지정하려면 background-position 속성을 함께 사용하면 됩니다.