CSS의 background-image 속성은 요소에 배경 이미지를 지정할 때 사용합니다. 이 속성을 활용하면 텍스트나 콘텐츠 뒤에 원하는 이미지를 배치하여 시각적으로 풍부한 웹 페이지를 만들 수 있습니다.
아래 예제 코드를 실행하면 background-image 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
예제 코드
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
}
</style>
</head>
<body>
<div id = "demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point는 온라인 콘텐츠에 더 잘 반응하고, 자신의 거실에서 편안하게 자기 속도에 맞춰 새로운 기술을 배우고자 하는 독자층이 존재한다는 아이디어에서 출발했습니다. 2006년 HTML 단 하나의 튜토리얼로 여정을 시작했으며, 뜨거운 반응에 힘입어 프로그래밍 언어부터 웹 디자인, 학문 분야까지 다양한 주제를 다루는 방대한 튜토리얼과 관련 글들을 꾸준히 추가해 왔습니다.
</p>
</div>
</body>
</html>코드 설명
위 예제에서 핵심 부분은 다음과 같습니다.
- #demo 선택자: id가 'demo'인 div 요소에 스타일을 적용합니다.
- border: 5px dashed red; 빨간색 점선 테두리로 요소의 경계를 눈에 잘 띄게 만듭니다.
- padding: 10px; 내용과 테두리 사이에 10px의 여백을 줍니다.
- background-image: url(...); 지정한 이미지 URL을 해당 요소의 배경으로 설정합니다.
함께 알아두면 좋은 배경 관련 속성
background-image는 보통 다음 속성들과 함께 사용하면 더욱 완성도 높은 배경을 만들 수 있습니다.
- background-repeat: 배경 이미지의 반복 여부를 설정합니다. (repeat, no-repeat, repeat-x, repeat-y)
- background-size: 배경 이미지의 크기를 조절합니다. (cover, contain, 픽셀 값 등)
- background-position: 배경 이미지의 위치를 지정합니다. (center, top, left 등)
이처럼 CSS 배경 이미지 속성을 익혀두면 이미지 태그 없이도 다양한 시각 효과를 구현할 수 있어 웹 디자인 작업의 효율이 크게 향상됩니다.