CSS로 배경 이미지 설정하기
웹 페이지에 배경 이미지를 설정하려면 CSS 스타일을 사용해야 합니다. CSS의 <style> 태그 안에 background-image 속성을 추가하면 되며, 이 속성을 통해 jpg, png, svg, gif 등 다양한 형식의 그래픽 파일을 배경으로 지정할 수 있습니다.
참고로 HTML5에서는 더 이상 <body> 태그의 background 속성을 공식적으로 지원하지 않습니다. 따라서 과거처럼 HTML 속성으로 배경을 지정하는 대신, 반드시 CSS를 사용해 배경 이미지를 설정해야 합니다.
예제
다음 코드를 실행하여 HTML 웹 페이지의 배경 이미지가 어떻게 적용되는지 직접 확인해 볼 수 있습니다.
실시간 데모
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/videotutorials/images/tutor_connect_home.jpg");
}
</style>
</head>
<body>
<h1>Connect with Tutors</h1>
</body>
</html>함께 알아두면 좋은 배경 관련 속성
배경 이미지를 더 세밀하게 제어하고 싶다면 아래 속성들을 함께 활용해 보세요.
- background-repeat: 이미지 반복 여부를 설정합니다. 전체 화면에 한 번만 표시하려면
no-repeat을 사용합니다. - background-size: 이미지 크기를 조절합니다.
cover값을 사용하면 화면 전체를 꽉 채우도록 확대됩니다. - background-position: 이미지의 위치를 지정합니다. 예를 들어
center는 이미지를 중앙에 배치합니다.
이러한 속성들을 조합하면 해상도와 화면 크기에 관계없이 자연스럽게 표시되는 반응형 배경 이미지를 손쉽게 구현할 수 있습니다.