[Css] 배경 속성 - 이미지, 반복, 고정, 위치

Css 배경(Background)

background 속성 축약 표현

background: color | image | repeat | attachment | position

div {
    background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
    width: 50vw;
    height: 300px;
}

background-size 속성

• CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있다.
• background-size 속성값이 contain면 이미지 비율은 유지하면서 크기를 가능한 크게 조절하므로, 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같다.
• background-size 속성값이 cover면 이미지 비율은 유지하면서 요소의 모든 영역을 가리도록 크기를 조절하므로, 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같다.

background-size: 넓이 높이 contain|cover ;

#resize {
    background: url(/examples/images/img_monitor.png);
    background-size: 200px 110px;
}

#contain { background-size: contain; }
#cover { background-size: cover; }

body {
    background-image: url("front.png"), url("back.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, 500px;
}

background-origin 속성

• background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정한다.

#border {
    background-origin: border-box;   /* 테두리 영역의 왼쪽 위에 맞춤 */
}

#padding {
    background-origin: padding-box;   /* 패딩 영역의 왼쪽 위에 맞춤 (기본) */
}

#content {
    background-origin: content-box;   /* 내용 영역의 왼쪽 위에 맞춤 */
}

background-clip 속성

• background-clip 속성은 해당 요소의 배경을 어느 영역까지 설정할지 결정한다.

#border {
    background-origin: border-box;   /* 테두리 영역의 끝부분까지 설정 (기본) */
}

#padding {
    background-origin: padding-box;   /* 패딩 영역의 끝부분까지 설정 */
}

#content {
    background-origin: content-box;   /* 내용 영역까지만 설정 */
}

background-image 속성

• background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정하며, 설정된 배경 이미지는 반복되어 나타난다.
• 각각의 배경 이미지는 쉼표 ,로 구분되며 스택처럼 차례대로 쌓이는데, 가장 처음 명시된 이미지가 맨 위에 나타난다.

#origin {
        background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
        background-position: right top, left;
        background-repeat: no-repeat, repeat;
        background-size: 100px 233px, auto;
    }

background-repeat 속성

• background-repeat 속성을 사용하면 수직과 수평 반복을 지정할 수 있는데, 기본값이 repeat이라 설정된 이미지 크기가 화면보다 작으면 자동으로 이미지가 반복 출력된다.
• repeat-x의 경우 x축으로만 배경 이미지를 반복하고 repeat-y의 경우 y축으로만 배경 이미지를 반복한다.

/* 반복하지 않고 한번만 */
#origin {
    background: url(/examples/images/img_monitor.png);
    background-repeat: no-repeat;
}

/* 수평 */
body {
    background-image: url("http://poiemaweb.com/img/bg/dot.png");
    background-repeat: repeat-x;
}

/* 수직 */
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }

/* 여러개 */
body {
    background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
    background-repeat: no-repeat, repeat;
}

background-position 속성

• background-position 속성은 반복되지 않는 배경 이미지의 상대 위치를 설정하며, 기본값은 background-position: 0% 0%;로 우측 상단에 위치한다.

.example1 { background-position: top; }
.example2 { background-position: bottom; }
.example3 { background-position: center; }
.example4 { background-position: left; }
.example5 { background-position: right; }
.example6 { background-position: 25% 75%; }

.example7 {
    background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/dot.png");
    background-position: 0px 0px, center;
}

background-attachment 속성

• background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있는데, 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.

body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-attachment: fixed;
}

background-color 속성

.bg-col-white { background-color: rgb(255, 255, 255); }
.bg-col-red { background-color: red; }
.bg-transparent { background-color: transparent; }

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/