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를 설정하면 배경사진은 '뷰포트'에 고정이 되어 요소와 함께 움직이지 않는다.