1. background-color 속성

---

• background-color 속성은 해당 HTML 요소의 배경색(background color)을 설정한다.

body {
    background-color: lightblue;
}

h1 {
    background-color: rgb(255, 128, 0);
}

p {
    background-color: #FFFFCC;
}

2. background-image 속성

---

• background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다. 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타난다.

body {
    background-image: url("/examples/images/img_background_good.png");
}

3. background-repeat 속성

---

• 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타난다. background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.

1) repeat-x

• 배경 이미지를 수직으로 반복한다.

/* 배경의 수평 반복 */
body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: repeat-x;
}

2) repeat-y

• 배경 이미지를 수평으로 반복한다.

3) no-repeat

• 배경 이미지가 반복되지 않고 한 번만 나타난다.

4. background-position 속성

---

• background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정한다.

• 가로 위치 값(x축)으로 left, center, right를 사용할 수 있고, 세로 위치 값(y축)으로 top, center, bottom을 사용할 수 있다.

• 가로 위치 값을 먼저 작성하고 세로 위치 값을 작성한다.

body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    /* right: 가로 위치, top: 세로 위치 */
    background-position: right top;
}

• 또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있다. 이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 된다.

body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    background-position: 100px 200px;
}

5. background-attachment 속성

---

• background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수 있다. 이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.

body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-attachment: fixed;
}