background-image 정리

background-image: url(' ');

배경 이미지의 특징

• 기본값은 repeat
• 배경색과 함께 사용될 경우, 이미지가 색상을 덮기 때문에 이미지가 우선으로 보여짐.
• 배경의 역할을 하고있기 때문에, 보여질 공간이 없으면 적용되지 않음.
• 이미지가 제대로 표시되지 않을 경우를 대비해서 backgroud-color도 함께 지정해주는 게 좋음.

background-repeat

background-repeat: repeat; 기본값. 반복
background-repeat: no-repeat; 반복 없음
background-repeat: repeat-x; 수평 반복
background-repeat: repeat-y; 수직 반복

background-position

-위치값을 숫자로 작성. 기본값. 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

/* 키워드 값 */
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

-기본값. 스크롤 시 배경 이미지 함께 이동
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;