배경(Background)

배경(Background)는 어떻게 적용할까?

background 단축 속성과 이 속성의 다양한 하위 속성들을 사용하여 웹 페이지의 배경을 스타일링할 수 있다.
우선 background 단축 속성에 포함되는 속성들을 알아보자.

---

background 속성의 하위 속성

background-color

배경의 색상을 지정할 수 있다.

body {
  background-color: #f0f0f0;
}

---

✏️ background-image

배경 이미지를 지정할 수 있다. 배경 이미지는 URL을 통해 가져와야 한다.

body {
  background-image: url("background.jpg");
}

---

✏️ background-repeat

배경 이미지를 반복할지, 반복 방법 등을 결정한다.

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

---

✏️ background-position

배경 이미지의 위치를 지정한다.
x축과y축은 공백을 사용하여 각각의 위치를 지정한다.

• x축에는 right, left를 적용할 수 있다.
• y축에는 top, bottom을 적용할 수 있다.
• center는 중앙에 배치된다.

body {
  background-image: url("background.jpg");
  background-position: center center;
}

---

✏️ background-size

배경 이미지의 크기를 지정한다.

• auto, cover, contain, 혹은 픽셀/퍼센트 값으로 크기를 지정할 수 있다.

body {
  background-image: url("background.jpg");
  background-size: cover;
}

---

✏️ background-attachment

배경 이미지가 스크롤될 것인지, 혹은 고정될 것인지 결정한다.

• scroll 요소 자체에 고정한다. (스크롤이 필요할 때, 해당 요소에만 스크롤 바가 생기게 된다.)
• fixed 뷰포트를 기준으로 고정된다.
• local 요소의 콘텐츠에 고정한다. (요소와 함께 스크롤된다.)

body {
  background-image: url("background.jpg");
  background-size: cover;
}

---

✏️ background(shortand)

위의 속성들을 하나로 작성하는 속성이다.

body {
  background: #f0f0f0 url("background.jpg") no-repeat center center cover fixed;
}
/ *
배경 색상은 #f0f0f0
배경 이미지는 "background.jpg"
이미지 반복은 없음(no-repeat)
이미지 위치는 중앙(center center)
이미지 크기는 cover
이미지 고정은 fixed
*/

---

✏️ background-origin

배경 이미지의 시작 위치의 기준을 설정한다.

(1) content-box

• 배경 이미지가 테두리(border) 영역에만 표시되게 해준다.

div {
  background: url("background.jpg");
  background-origin: content-box;
}

(2) padding-box

• 기본값이다.
• 배경 이미지가 패딩(padding) 영역부터 테두리(border) 영역까지 걸쳐 표시되게 해준다.

div {
  background: url("background.jpg");
  background-origin: padding-box;
}

(3) border-box

• 배경 이미지는 테두리(border)를 포함한 전체 영역에 적용된다.
• 테두리(border) + 패딩(padding) + 테두리(border) = 전체영역

div {
  background: url("background.jpg");
  background-origin: border-box;
}