CSS 이론 채워 넣기 - 3. background 관련 속성

1. background-image

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

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

2. background-repeat

배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다.

설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-repeat 프로퍼티의 기본값이 repeat 이기 때문이다.

속성	설명
repeat-x	x축으로만 배경 이미지를 반복한다
repeat-y	y축으로만 배경 이미지를 반복한다.
no-repeat	반복하지않는다.

background-image에 복수개의 이미지를 설정

background-image 복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 전면에 출력된다.

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

3. background-size

배경 이미지의 사이즈를 지정한다. 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있다.

프로퍼티값은 px, %, cover, contain 등을 사용

속성	설명
cover	배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰값에 배경이미지를 맞춘다. 따라서 이미지의 일부가 보이지 않을 수 있다.
contain	배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정한다.

배경이미지의 width, height를 모두 설정할 수 있다. 이때 첫번째 값은 width, 두번째 값은 height를 의미한다. 하나의 값만을 지정한 경우, 지정한 값은 width를 의미하게 되며 height는 auto로 지정된다.

.bg1 { background-size: 700px 500px;  }
.bg2 { background-size: 100% 100%; }
.bg3 { background-size: cover; }

4. background-attachment

일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다. 화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 background-attachment 프로퍼티에 fixed 키워드를 지정 한다.

5. background-position

일반적으로 background-image는 좌상단부터 이미지를 출력한다. 이때 background-position 프로퍼티를 사용하면 이미지의 좌표(xpos, ypos)를 지정 할 수 있다.

기본값은 background-position: 0% 0%; 로 배경이미지는 우측 상단에 위치하게 된다.

.imgBox1 {
  background-position: 0% 0%;
}
.imgBox2 {
  background-position: top;
}
.imgBox2 {
  background-position: 0px 0px, center;
}

6. background Shorthand

background-color, background-image, background-repeat, background-position를 한번에 정의하기 위한 Shorthand Syntax이다.

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

참고

https://poiemaweb.com/css3-background