배경 이미지의 특징
background-repeat: repeat; 기본값. 반복
background-repeat: no-repeat; 반복 없음
background-repeat: repeat-x; 수평 반복
background-repeat: repeat-y; 수직 반복
-위치값을 숫자로 작성. 기본값. x축 y축
background-position: 0 0; 기본값
background-position: 50% 0; (x=중앙, y=0)
background-position: 100% 100%; (오른쪽 아래 위치)
-위치값을 텍스트로 작성. 값이 정해져있다.(상세 위치 조정 불가능)
텍스트 의미)left=0, top=0, center=50%, right=100%, bottom=100%
background-position: left top;
background-position: right bottom;
-위치값을 단위로 작성.
background-position: 500px 200px;
/* 키워드 값 */
background-size: cover; 가로 세로 중 큰 값 기준. 공백이 생길 수 있으나 비율 유지o. 잘림x
background-size: contain; 가로 세로 중 작은 값 기준. 전체를 채우기 때문에 공백x. 보이지 않는 부분이 생길 수 있음. 비율 유지o.
/* 단일 값 구문 */
/* 이미지 너비 (높이는 'auto'가 됨) */
background-size: 100%; 화면에서 잘릴 수 있음
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 두 개 값 구문 */
/* 첫 번째 값: 이미지 너비, 두 번째 값: 이미지 높이 */
/* 높이값에 auto; 이외의 값을 작성하면 비율 유지x */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 다중 배경 */
/* 쉼표로 구분 */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
-기본값. 스크롤 시 배경 이미지 함께 이동
background-attachment: scroll;
-브라우저를 기준으로 배경 이미지 고정.
브라우저를 기준으로 배경이미지를 고정하기 때문에 body의 높이값과 상관없이 위치
background-attachment: fixed;
ex)
background-attachment: fixed;
background-image: url(경로);
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 0;
축약형) 띄어쓰기로 구분. size 작성시 반드시 position 다음 '/'를 쓰고 size값 작성.
순서없이 작성 후 background-size: cover;만 따로 작성해도 된다.
background-url(경로) no-repeat fixed 100% 0 / cover;
디증 이미지는 쉼표로 구분. 먼저 작성된 배경 이미지가 위에 보여짐(기존에 알던 순서랑 반대😱)
ex)
background-image: url(images/img1.jpg), url(images/img2.png);
background-repeat: no-repeat, repeat;
background-position: 50%, 0;
background-attachment: fixed;
background-size: 600px, auto;
축약형)
background: url(images/img1.jpg) no-repeat fixed 50% / 600px,
url(images/img2.png) repeat fixed;