background

background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의합니다.

background-color

요소에 배경 색상을 지정합니다. 색상값 또는 transparent(투명값)을 지정할 수 있습니다.

  .vox {
    background-color: rgba (255,0,0,0.5);
  }

  .box {
    background-color: red;
  }

background-image

요소에 배경 이미지를 지정합니다.

<head>
    <style>
        .box {
            background-image: url('../image/backbg.jpg')
        }
    </style>
</head>
<body>
    <div class="box">
        배경이미지 지정
    </div>

gradient

gradient는 세가지 종류가 있는데 linear-gradient(선형), radial-gradient(반지름형), repeating gradient(반복형)가 있습니다.
gradient는 한 방향에서 색상이 점차 흐려지거나, 색이 변화할 때 효과를 주는 속성입니다.
색상이 아니라 크기가 없는 이미지이기에 background-image나 background 프로퍼티를 통해 사용해야 합니다.
gradient는 브라우저가 생성하는 것이기에 이미지를 사용했을 때보다 용량이 훨씬 적고, 화면을 확대해도 이미지보다 선명하다는 장점이 있습니다.

.box {
  background-image: linear-gradient(방향,색상1 색상점 위치(20%),색상2,색상3...); /* 2가지 이상의 색상이 있어야 하며, 
                                                              방향(시작지점은 생략, 도착지점만 to를 사용 지정합니다./각도도 사용가능-180deg)도 설정할 수 있습니다. */
}

.cos {
  background-image: radial-gradient(to top right, rgba(255,0,0,0.3), #ff0fff, skyblue);  
}

.hos {
  background-image: repeating-linear-gradient(45deg, lightpink, lightsalmon, orangered);  
}

background-repeat

배경 이미지의 반복을 지정합니다. 수직, 수평, 수직과 수평 모두의 반복을 지정할 수 있습니다.
설정된 이미지가 화면의 크기보다 작은 경우 자동으로 이미지가 반복출력되어 화면을 채웁니다.
background-repeat 의 기본값이 repeat 이기 때문입니다.
만약 반복되는 이미지를 원치않는다면 background-repeat:no-repeat 을 하면됩니다.

.box {
  background-image: url("moong2.jpg");
  background-repeat: repeat-x; /* X축으로만 반복 설정 */
}

.vox {
  background-image: url("moong3.jpg");
  background-repeat: repeat-y; /* Y축으로만 반복 설정 */
}

.nox {
  background-image: url("moong4.jpg"), url("moong5.jpg");
  background-repeat: repeat, no-repeat; /* X축 Y축 모두 반복 설정, 반복 설정 안함 */
}

background-size

배경 이미지의 사이즈를 지정합니다.
배경 이미지의 고유 비율을 유지함으로 설정에 따라 이미지의 일부가 안보일수 있습니다.
프로퍼티의 값으로는 px, %, cover, contain 등이 있습니다.
배경 이미지의 width, heigth 를 모두 설정할 수 있습니다.
이떄 첫번째 값은 너비, 두번째 값은 높이입니다.
하나의 값만을 지정한 경우에는 지정한 값이 너비가 되고 높이는 auto 가 됩니다.

.box {
  background-size: 700px 500px; /* width: 700px, height: 500px */
}

.vox {
  background-size: 700px; /* width: 700px, height: auto; */
}

.nox {
  background-size: 100% 50%; /* 퍼센트를 통해 값을 줄 수 있습니다.
                              화면의 크기에 따라 배경도 같이 변경됩니다. */
}

.wox {
  background-size: cover; /* 배경 이미지의 크기비율을 유지한 상태에서
                              부모 요소의 width, height중 큰값에 배경 이미지를 맞춥니다.
                              따라서 일부 이미지가 안보일 수 있습니다. */
}

.aox {
  background-size: contain; /* 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소 영역에
                              배경 이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록
                              이미지 스케일을 조절합니다. */
}

background-attachment

배경 이미지를 어떻게 고정할지에 대한 프로퍼티입니다.
해당 요소에 스크롤이 있을 경우, 스크롤하여 내용을 볼 때 배경 이미지가 내용과 같이 움직일지,
또는 배경 이미지는 고정되어 있을지 결정 할 수 있습니다.
또한, background-position 의 기준 점을 viewport 로 변경할 수 있습니다.

.box {
  background-attachment: local; /* 요소 안에 고정됩니다. 요소 안을 스크롤을 할 때, 
                                  이미지가 내부의 내용과 같이 움직입니다. */
}

.vox {
  background-attachment: scroll;  /* 기본 값으로 요소에 고정되어 있습니다. */
}

.hox {
  background-attachment: fixed;   /* background-position의 좌표를 viewport(웹 페이지 화면)를 기준으로 합니다. */
}

.fox {
  background-attachment: inherit; /* 부모의 속성을 상속 받습니다. */
}

background-position

background-image로 넣은 이미지의 좌표 값을 정하는 프로퍼티입니다.
프로퍼티의 값으로 px, %, left, bottom, center 등 값이 올 수 있으며,
값은 x축 y축으로 두 개를 띄어쓰기로 구분하여 넣습니다.
좌표 값이 양수로 갈수록 x축에서는 오른쪽, y축에서는 아래 쪽으로 이동합니다.
반대로 음수의 경우는 각각 왼쪽, 위쪽으로 이동합니다.
또한 단위를 %로 줄 경우 이미지의 사이즈 기준으로 변환됩니다.
100%의 경우 x축은 오른쪽 끝, y축은 아래쪽 끝으로 이동합니다.
50%의 경우 가운데 정렬이 됩니다.
```
.box {
  background-position: 100% 50%;
  /* or */
  background-position: right center;
}
```

background

background-로 시작하는 프로퍼티들을 background 프로퍼티로 지정할 수 있습니다.
속성의 순서들은 상관이 없으며, 꼭 모든 속성들을 선언할 필요는 없습니다.
position과 size의 값이 둘 다 %일 경우 헷갈릴수 있으므로 size 속성의 경우 앞에 /를 붙여서 구분해줍니다.
```
.box {
  background : url('moong2.png') no-repeat fixed #f0f 50% 50% /100% 100%;
} 
```

2. Today I Found Out

디자인에서 어떻게 보면 중요한 배경 이미지를 공부하면서 단순히 사진을 넣고, 색상을 넣는 것이 아닌
gradient를 사진 위에 투명도를 조절하여 나름 근사한 결과를 만드는 것을 보고
지금까지 알고 있는 background 프로퍼티는 굉장히 단적인 부분만 알고 있었구나라는 생각을 하게 되었습니다.
알고 있어도 어떻게 활용하냐에 따라 특히 CSS는 더욱 결과값이 달라지는 것 같습니다.
더더욱 다른 사람들이 만들어놓은 작품도 보면서 어떻게 활용할지 생각을 키워나가도록 해야겠습니다.

3. refer

http://webberstudy.com/

http://poiemaweb.com/

http://aboooks.tistory.com/

http://jsunnylab.tistory.com/31?category=405626