ex.

<div></div>
div {
  width: 200px;
  height: 200px;
  background-color: orange;
  url("https://t1.daumcdn.net/thumb/R720x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2cYQ/image/zgFUnsSpk5wb3-HLZWQxQR0n-Ng.png");
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: center;
}

(이미지는 내가 좋아하는 영화 주토피아의 캐릭터 주디이다.)

이 때 배경색상은 기본적으로 배경이미지 뒤에 출력되는 것을 볼 수 있다.

repeat-x를 사용하면 수평으로'만' 반복하고
repeat-y를 사용하면 수직으로'만' 반복한다.

background-image의 기본 위치는 맨 위쪽, 맨왼쪽이다.
그리고 브라우저는 대부분의 개념이 위에서 아래로 시작한다.


이런 식으로 말이다.

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  background-image: url("https://t1.daumcdn.net/thumb/R720x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2cYQ/image/zgFUnsSpk5wb3-HLZWQxQR0n-Ng.png");
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: top right;
}


background-position의 value에 top right 를 대입하니 주디가 오른쪽 위로 이동했다.

이는 right top으로 써도 무방하다

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  background-image: url("https://t1.daumcdn.net/thumb/R720x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2cYQ/image/zgFUnsSpk5wb3-HLZWQxQR0n-Ng.png");
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: 100px 100px;
}

이렇게 100px 100px을 입력해주면 주디가 우측 하단으로 도망간다.
그 이유는 이미지의 왼쪽 위 꼭짓점이 왼쪽 위 가장자리를 기준으로 x축으로 100px y축으로 100px 이동하였기 때문이다.

즉, cover(요소를 모두 덮겠다는 의미) 요소가 가로가 더 넓다면 더 넓은 가로를 다 채운다.
그럼 이미지가 원래 정사각형이라면 세로 일부가 잘리게 되낟.

contain(요소에 이미지를 모두 포함하겠다는 의미)은 가로가 더 넓다면 더 좁은 세로에 맞춰 이미지를 채운다. 그럼 정사각형이라 가정할시 이미지는 모두 들어가고 가로의 일부 영역이 남게 된다.

Tip. background-size는 하나만 명시하면 그게 가로 너비가 되고 세로 너비는 비율에 맞게 변하게 된다.

fixed를 설정하면 배경사진은 '뷰포트'에 고정이 되어 요소와 함께 움직이지 않는다.

0개의 댓글