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;
}