CSS background-image 속성으로 배경 이미지 설정하는 방법

CSS의 background-image 속성은 선택한 요소의 배경으로 이미지를 지정할 때 사용합니다. 이 속성을 활용하면 텍스트나 콘텐츠 뒤에 원하는 이미지를 배치하여 시각적으로 풍부한 웹 페이지를 만들 수 있습니다.

기본 문법

CSS background-image 속성의 기본 문법은 다음과 같습니다.

Selector {
    background-image: /*값*/
}

아래 예제들을 통해 CSS background-image 속성의 실제 사용 방법을 살펴보겠습니다.

예제 1: 요소에 배경 이미지 적용하기

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    margin: 24px;
    box-shadow: 0 0 5px black;
    padding: 20px;
    background-image: url("https://www.tutorialspoint.com/servlets/images/servlets.jpg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 0 1px white;
    font-size: 1.4em;
}
p {
    box-shadow: 0 0 5px grey;
}
</style>
</head>
<body>
<h2>Learn Python Blockchain</h2>
<div id="demo">
<p>Servlets are programs that run on a Web or Application server and act as a middle layer between a requests coming from a Web browser or other HTTP client and databases or applications on the HTTP server.
Using Servlets, you can collect input from users through web page forms, present records from a database or another source, and create web pages dynamically.</p>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS background-image 속성으로 배경 이미지 설정하는 방법

예제 2: 여러 요소에 서로 다른 배경 이미지 적용하기

<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 150px;
    width: 150px;
    background-image: url("https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg");
    border: 2px solid brown;
}
div > div {
    height: 80px;
    width: 80px;
    margin-right: 50px;
    background-image: url("https://www.tutorialspoint.com/images/hibernate.png");
}
h1 {
    background-image: url("https://www.tutorialspoint.com/hibernate/images/hibernate-patterns.jpg");
    background-repeat: no-repeat;
    color: black;
}
</style>
</head>
<body>
<h1>Demo</h1>
<div>
<div></div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS background-image 속성으로 배경 이미지 설정하는 방법

함께 사용하면 좋은 관련 속성

background-image 속성은 단독으로 사용하기보다 아래 속성들과 함께 사용하면 더욱 세밀한 배경 제어가 가능합니다.

background-repeat: 이미지 반복 여부를 설정합니다(repeat, no-repeat 등).
background-size: 배경 이미지의 크기를 조절합니다(cover, contain 등).
background-origin: 배경 이미지가 시작되는 기준 영역을 지정합니다(content-box, padding-box, border-box).
background-position: 배경 이미지의 위치를 조정합니다.

이처럼 CSS background-image 속성을 익혀두면 이미지 태그 없이도 다양한 시각적 효과를 구현할 수 있어 웹 디자인 작업의 유연성이 크게 향상됩니다.