CSS 배경 속성이란?
CSS 배경(background) 속성은 웹 페이지에서 요소의 배경을 스타일링할 때 사용되는 핵심 속성입니다. background 속성은 요소의 배경을 한 번에 지정할 수 있는 단축 속성(shorthand)으로, 색상·이미지·반복 방식·위치 등 여러 값을 하나의 선언으로 간결하게 작성할 수 있습니다.
CSS 배경 속성은 다음 8가지 하위 속성으로 구성됩니다.
- background-color — 요소의 배경 색상을 지정합니다.
- background-image — 배경 이미지를 지정합니다.
- background-repeat — 배경 이미지의 반복 방식을 설정합니다.
- background-position — 배경 이미지의 위치를 지정합니다.
- background-clip — 배경이 그려질 영역(클리핑 범위)을 결정합니다.
- background-size — 배경 이미지의 크기를 조절합니다.
- background-origin — 배경 이미지의 기준 위치를 설정합니다.
- background-attachment — 스크롤 시 배경을 고정할지 여부를 지정합니다.
문법(Syntax)
CSS background 속성의 기본 문법은 다음과 같습니다.
Selector {
background: /*값*/;
}예제 1: 배경 이미지 적용하기
다음 예제는 요소에 배경 이미지를 적용하고, 반복 없이 중앙에 배치하며 화면 전체를 덮도록 크기를 조절하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
예제 2: 여러 배경 이미지 사용하기
CSS에서는 쉼표(,)로 구분하여 여러 개의 배경 이미지를 동시에 적용할 수 있습니다. 아래 예제는 세 개의 배경 이미지를 서로 다른 위치에 배치하고, background-attachment: fixed를 사용해 스크롤해도 배경이 고정되도록 설정한 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-logo.jpg"), url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"), url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
