배경 이미지 넣기

웹 문서 전체에 배경 이미지를 넣고 싶으면 body안에 다음과 같이 넣어주면 된다.

body {background-image : url('경로');}

이미지의 url을 넣는다.

이렇게 넣으면 배경 이미지의 크기가 배경을 채우려는 요소보다 작은 경우, 반복해서 적용되며 웹 페이지를 채우게 된다. 이 반복을 따로 설정해 줄 수 있다.

배경 이미지 반복

background-repeat : repeat : 화면에 가득 찰 때까지 배경 이미지를 반복.
background-repeat : repeat-x : 화면에 가득 찰 때까지 배경 이미지를 가로로 반복.
background-repeat : repeat-y : 화면에 가득 찰 때까지 배경 이미지를 세로로 반복.
background-repeat : no-repeat : 배경 이미지를 반복하지 않고 한 번만 표시.

배경 이미지 크기 조절

background-size : auto : 원래 이미지 크기만큼 배경에 표시
background-size : contain : 배경 이미지의 비율을 유지하면서 최대한 확대/축소
background-size : cover : 배경 이미지로 요소를 모두 덮도록 어떻게든 최대한 확대/축소 (비율을 유지하지 않는다, 이미지도 짤릴 수 있음)
background-size : [크기값] : 배경 이미지의 크기를 지정. (너비만 지정할 경우 높이를 자동 계산)
background-size : [백분율] : 배경 이미지가 들어갈 요소 기준으로 백분율 값을 지정.

배경 이미지 위치

background-position : right bottom //이는 오른쪽 아래에 배경 이미지를 위치시킨다.

수평위치 : left, center, right, 백분율, 길이값
수직위치 : top, center, bottom, 백분율, 길이값

배경 이미지 고정 여부

background-attachment: scroll 스크롤하면 배경이미지도 움직임 (디폴트 값)
background-attachment: fixed 스크롤해도 배경이미지는 고정되어있음

위 속성들은 모두 축약속성으로 background: 안에 담을 수 있지만,
보기에 직관적으로 안 좋다.. flutter를 사용해서 그런지 어색하다..