> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined-5.md).

# 배경 스타일링

## 배경 스타일링

## 배경 색: background-color

* 배경의 색상을 넣는 속성
* 속성 값은 rgb() 또는 #으로 시작하는 hex, 색상 이름 등이 들어 갈 수 있습니다.
* 초기값 : `background-color: transparent`

### 예시

```css
iv {
  background-color: #eee;
}
```

### 배경색을 투명하게 설정하기

* `background-color`에 `transparent` 또는 `none`값을 설정해주면 된다.

## 배경 위치: background-position

* `left,` `center`,`right`로 표현 할 수 있다.
* `px`이나 `%`등의 속성이 들어 올 수 있다.
* 값은 x 축 y 축으로 두 개를 띄어쓰기로 구분하여 넣는다. 

| 좌표 | 값       | 이동  |
| -- | ------- | --- |
| x  | 양수, 값 ↑ | 오른쪽 |
| y  | 양수, 값 ↑ | 아래쪽 |
| x  | 음수, 값 ↓ | 왼쪽  |
| y  | 음수, 값 ↓ | 위쪽  |

```css
div {
  background-position: 200px 20px;

  /* 또는 */
  background-position: 20% 0%; /* x y */

  /* 또는 */
  background-position: left top; /*기본값*/
}
```

## 배경 반복: background-repeat

background-image의 반복 여부 설정

```css
div {
  background-repeat: repeat;    /*기본값*/
  background-repeat: no-repeat; /*반복 없음*/
  background-repeat: repeat-y;  /*y축으로 배경이미지 반복*/
  background-repeat: repeat-x;  /*x축으로 배경이미지 반복*/
}
```

## 배경 고정: background-attachment

* 화면 스크롤이 있을 경우 배경이미지를 고정할 수 있다
* background-position의 기준 점을 뷰포트(웹 페이지 화면)로 변경할 수 있습니다.

  ```css
  div {
    background-attachment: fixed;
  }
  ```

## 배경 크기: background-size

배경 이미지의 크기 설정

## 배경 이미지: background-image

```css
.bg-image {
  background: url('../image/aaa.jpg'); no-repaet center center;
  background-size: contain; /*이미지를 모두 박스 안에 포함한다*/
  background-size: cover; /*보여지는 부분은 위치속성으로 설정 가능, 화면 크기에 따라 사진의 크기가 달라지기 때문에 확인하기*/
}
```

### 패던(Patterns) 디자인

```css
.is-floral {
  background: #000 url("../images/oriental-floral-pattern.svg");
  background-size: 50px; /* 패턴이미지 크기 조정 */
}
```

```css
.is-model {
  background: url("../images/model.jpg") center;
  background-size: 150px;
}
```

## 배경 클리핑: background-clip

* 배경이미지의 클리핑 영역 설정
  * content-box
  * padding-box
  * border-box
* 항상 맨 아래에 속성을 입력해줘야 한다. 그래야 속성이 잘 적용된다.

## 배경 기준: background-origin

* 배경이미지의 시작에 대한 기준점 설정
  * content-box (기본값)
  * padding-box
  * border-box

```css
.background-clip {
  box-sizing: border-box;
  border: 20px solid rgba(0, 0, 0, 2);
  padding: 20px;
  background: url("../images/model.jpg") center;
  background-size: contain;
  background-clip: content-box; /*클립 속성을 항상 아래쪽에 위치*/
  background-origin: border-box; /*기본값*/
}
```

## background (속기형) 

위에 속성들을 하나로 묶어서 사용

```css
/* transparent는 기본값이기 때문에 안넣어도 상관X */
div {
  background: transparent url("../img/aa.svg") no-repeat 10px 40px fixed;
}
```