배경에 관한 값들입니다.

  • background-color

    배경색을 지정할수있습니다. 6진수 #00FFFF 로 나타내거나 rgb(255, 0, 0) 처럼 값을 넣을수도 있습니다.
    em { color: #ff0000; } /* 6진수 */
    em { color: rgb(255,0,0) } /* integer range 0 - 255 */
    em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
    em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
    em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */

  • background-image

    배경 이미지를 넣을수 있습니다. url 이 붙어서 주소를 나타내게 됩니다.

    예) background-image: url(nice.jpg);

  • background-repeat

    배경이미지를 반복하는지 정할수 있습니다. 값들은 x 방향, y방향, 그냥 반복, 반복없이 이렇게 4가지입니다.
    no-repeat 은 반복하지 않는것이고
    x-repeat 은 좌우 방향으로 반복하는것
    y-repeat 은 위아래로 반복하는것
    repeat 은 좌우상하로 다 반복하는것을 말합니다.

    예) background-repeat: x-repeat;

  • background-attachment

    배경을 고정시키는지 여부를 결정합니다. 고정하게 되면 스크롤에 관계없이 남게 되고, scroll 로 정하게 되면 스크롤하는것에 따라 보이거나 안보이거나 할수 있겠네요.
    fixed 고정시키기
    scroll 스크롤할수 있게됨

    예) background-attachment: fixed;

  • background-position

    배경이미지를 어디에 위치하게 하는지 혹은 어디서부터 시작하게 하는지 정할수 있습니다.

    배경에 반복이 없을경우, 포지션을 정하는곳에 위치하게 됩니다. 값들은 여러종류가 있는데요, 직접 숫자로 값을 정할수 있습니다.

    • background-position: 12px 5px;
      은 배경이 왼쪽에서 12px 그리고 위에서 5px 내려간곳에 위치한다는 것입니다. 배경의 중점은 왼쪽위 모서리 입니다.
    • background-position: 50% 50%;
      배경이 화면의 배율에 따라 중간에 위치하게 되겠죠.
    • background-position: top left;
      배경이 맨위 그리고 맨 왼쪽에 위치하게 됩니다.
      background-position: 0 0; 와 같은 효과겠죠
    • background-position: center right;
      배경이 위아래의 중간에 위치하고 오른쪽으로 가있겠네요
      background-position: 50% 100%; 과 같습니다.

    반복이 있을경우에는 background-postion 에서 결정된 곳을 중심으로 배경이 반복되게 됩니다.

  • background

    위의 모든것들을 다 담을수 있습니다. 순서는 이렇습니다.
    background: 배경색 배경이미지 반복 attatchment 위치;
    값들은 그저 한칸띄우고 계속 이어집니다.

    그래서 예를 들면
    background: #eee url(hi.jpg) no-repeat fixed 50% 0;
    배경색은 #eee 위치는 hi.jpg, 반복은 없고(no-repeat), attachment은 fixed 값에다가 위치는 50% 0 입니다.

    하지만 모든것을 다 채우지 않아도됩니다.
    background: url(hi.jpg) no-repeat;
    background: url(hi.jpg) x-repeat 100% 0;
    도 가능합니다.