[CSS] 배경 이미지 background-image, repeat, position, attachment, size

배경 이미지

background-image: ulr(이미지 경로);

배경이미지의 특징

• 기본값은 이미지 크기가 작아도 바둑판처럼 반복해서 채움
• 배경색과 함께 사용될 경우, 배경이미지가 색상을 덮는다. 이미지>배경색
• 컨텐츠가 없거나 자식 요소의 높이 값이 없을 경우, 즉 높이값이 없으면 배경 이미지도 보이지 않음.

---

배경 이미지 반복

background-repeat: 값;

배경이미지의 반복을 제어하는 값.

• repeat : 기본값. 반복
• no-repeat : 반복하지 않음.
• repeat-x, repeat-y : x축, y축으로만 반복

---

배경 이미지 위치

background-position: 값;

배경이미지의 위치를 제어하는 값.

• x축, y축 순서로 작성하며 단위값 대신 right(100%), left(0%), top(0%), bottom(100%),center(50%) 을 작성해도 작동.
• x, y축 동일하면 한 자리 수로 작성 가능.
• 컨텐츠가 존재할 수 있는 영역 내에서만 움직이며 표시됨.
• 지정한 위치에 도달하는 기준이 이미지의 왼쪽 끝이 아니라 이미지의 정중앙.

---

배경 이미지 고정

background-attachment: 값;

배경이미지의 고정을 설정하는 값.

• scroll : 기본값. 스크롤시 배경 이미지와 함께 이동
• fixed : viewport를 기준으로 지정된 위치에 고정. 스크롤을 따라 이동
  • viewport 기준으로 설정하기 때문에 body, html에 높이값이 없다면 뷰포트를 꽉 채우지만 높이값이 있으면 높이값에 맞춰서 채워진다.

---

배경 이미지 사이즈

background-size: 값;

배경이미지의 크기를 조정하는 값.

• 한자리 값 : 한 자리 수로 작성시 가로 사이즈 기준으로 세로 사이즈 비율 자동 조절
• x값, y값 : 지정한 값에 맞춰서 이미지 사이즈를 조절, 비율이 달라져 이미지 늘어날 수 있음.
• 100% : 요소 가로 사이즈에 맞춰 조절되며 이미지의 비율 유지, 영역을 벗어나는 부분은 이미지 잘림
• 100% 100% : 요소의 가로 세로 사이즈에 맞춰 조절, 비율이 달라져 이미지 늘어날 수 있음.
• contain : 이미지의 비율을 유지하면서 전체가 보일 수 있는 사이즈로 맞춤, 나머지 부분에 공백이 생김.
• cover : 이미지 비율을 유지하면서 요소의 전체를 채움, 영역 밖의 이미지는 잘림.
• auto : 기본값.

---

배경 이미지 관련 태그 축약형

background: size를 제외한 값을 순서 상관 없이 띄어쓰기로 구분해서 작성;

background: #000 url(./images/images.png) no-repeat fixed right;

background: 배경색 배경이미지 이미지반복제어 이미지고정 이미지위치;

 

background-size도 축약형으로 포함해서 작성하려면

반드시 background-position 다음에 ' / '를 쓰고 사이즈값 작성

 

background: #000 url(./images/images.png) no-repeat fixed right / cover;

==

background: #000 url(./images/images.png) no-repeat fixed right;

background-size:cover;

 

---

배경 이미지 중첩 background-Multi

background-images: url(경로), url(경로) ...

• 중첩은 쉼표로 구분. 먼저 작성된 값이 위에 보여짐.
• 중첩된 이미지의 배경이미지 관련 코드들도 순서에 따라 쉼표로 구분해서 작성하면 각 각 적용된다.
  • background-repeat: no-repeat, repeat ...
• 쉼표로 구분하지 않고 작성하면 일괄 적용된다.
  • background-position: 50%;