웹 페이지에서 요소의 배경 이미지를 설정하려면 CSS의 background-image 속성을 사용합니다. 이 속성은 body 태그뿐만 아니라 div, section 등 거의 모든 HTML 요소에 적용할 수 있습니다.
기본 문법
background-image 속성에는 url() 함수를 사용하여 이미지 파일의 경로를 지정합니다. 절대 경로와 상대 경로 모두 사용할 수 있습니다.
예제
다음 코드를 실행하면 문서 전체(body)의 배경에 이미지가 적용되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</head>
<html>
함께 알아두면 좋은 속성
배경 이미지는 기본적으로 요소 크기를 채울 때까지 반복해서 표시됩니다. 보다 세밀한 조정을 원한다면 다음 속성들을 함께 활용하세요.
- background-repeat: 이미지의 반복 여부를 지정합니다.
- background-size: 이미지의 크기를 조절합니다.
- background-position: 이미지의 위치를 지정합니다.