[CSS] - (15) Background

background 속성은
배경 색상, 이미지, 위치, 크기, 반복 방식을 조합해서 요소의 배경을 스타일링하는 기능이다.

---

1. background-color

: 요소의 배경 색상을 지정하는 속성

✔ 표현 방식
color: #0066ff;             /* hex */
color: rgb(0,102,255);      /* rgb */
color: rgba(0,102,255,1);   /* rgba */

rgba의 a는 alpha(투명도)
: 0 ~ 1 사이 값

---

2. background-image

: 배경으로 이미지를 넣을 때 사용하는 속성

background-image: url(경로);

✔ 이미지 경로 설정
① 내 컴퓨터 파일 사용

background-image: url(./assets/img.jpg);

./ → 현재 파일 기준 경로

② 무료 이미지 사용
무료 이미지 사이트에서 사용할 이미지 선택 후
이미지 우클릭 → Copy image address → url() 안에 붙여넣기.

---

3. background-repeat

: 배경 이미지 반복 여부 설정

background-repeat: repeat;    /* 기본값 */
background-repeat: no-repeat;

---

4. background-size

: 배경 이미지의 크기 조절

① contain

background-size: contain;

• 이미지 전체가 보이도록 비율 유지
• 여백이 생길 수 있음

② cover

background-size: cover;

• 요소 영역을 꽉 채움 비율 유지
• 일부 이미지 잘릴 수 있음
  → 실무에서 가장 많이 사용한다.

③ custom (직접 지정)

background-size: 80% 70%;

• width height 순서
• px / % / auto 사용 가능

---

5. background-position

: 배경 이미지의 위치 설정

✔ 키워드 사용
background-position: center center;
/* left | right | top | bottom | center */

✔ 좌표 값 사용 (x축 → y축 순서)
background-position: 50% 50%;
background-position: 20px 10px;