5. Background

body {
    background: url("http://poiemaweb.com/img/bg/dot.png") repeat-y;
    /*background-image: url("http://poiemaweb.com/img/bg/dot.png");*/
    /*background-repeat: repeat-y;*/
    /*no-repeat: 반복하지 않음.*/
}

body {
    background: url("../items/auto(1).jpg"), url("../items/auto(2).jpg") no-repeat, repeat;
    /*복수개의 이미지를 설정할 경우, 먼저 설정된 이미지 전면에 출력됨*/
    /*auto(2) 이미지 위에 auto(1)*/
}



.bg {
    background-size: 700px 500px;
    /*고유 비율이 있기때문에 잘릴 수도 있음,*/
    /*width height 순으로 지정하며 값을 하나만 입력했을땐 width 에 적용되고 height 는 auto*/
}

.bg {
    background-size: 100% 100%;
    /*화면을 줄이거나 늘리면 늘리면 크기도 따라 변경되서 찌그러지는 현상이 나타남.*/
}

.bg {
    background-size: cover;
    /*크기 비율을 유지한 상태에서 부모요소의 width 와 height 중 큰값에 이미지를 맞춘다.*/
    /*따라서 이미지 일부 보이지 않을 수 있음.*/
}
.bg {
    background-size: contain;
    /*크기 비율을 유지하며 부모요소의 영역에서 전체가 보이도록 리사이징*/
}



.parallax {
    /* parallax scrolling effect */
    background: url("http://poiemaweb.com/img/bg/stock-photo-125979219.jpg") fixed;
    /*background-image: url("http://poiemaweb.com/img/bg/stock-photo-125979219.jpg");*/
    /*background-attachment: fixed;*/
    /*일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다. */
    /*화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 */
    /*background-attachment 프로퍼티에 fixed 키워드를 지정한다.*/
    /*<div class="bg-wrap parallax">*/
        /*<div id="page-wrap">*/
    /*위와 같은 식으로 배경을 먼저 뿌려주고 그 안에 page-wrap 으로 글을 쓴다.*/
}



.example1 {
    background-position: top;
    /*top bottom center left right 가능하다.*/
}
.example2 {
    /*xpos 와 ypos 를 지정할 수 있다.*/
    /*기본값은 0% 0% 이다.*/
    /* <percentage> values */
    background-position: 25% 75%;
    /*background-position: 10px 20px; 픽셀로도 지정 가능*/
}



.bg-col-white {
    background-color: rgb(255, 255, 255);
}
.bg-col-red {
    background-color: red;
}
div {
    /* background: color || image || repeat || attachment || position */
    background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
    width: 50vw;
    height: 300px;
}