CSS 속성(Properties) - 배경

background-color

• 요소의 배경 색상
• 값
  • transparent [기본 값] : 투명함
  • 색상

 

background-image

• 요소의 배경 이미지 삽입
• 값
  • none [기본 값] : 이미지 없음
  • url(”경로”): 이미지 경로

 

background-repeat

• 요소의 배경 이미지 반복
• 값
  • repeat: 이미지를 수직, 수평 반복
  • repeat-x: 이미지를 수평 반복
  • repeat-y: 이미지를 수직 반복
  • no-repeat: 반복 없음

 

background-position

• 요소의 배경 이미지 위치
• 값
  • 방향: top, bottom, left, right, center 방향
  • 단위: px, em, rem 등 단위로 지정

 

background-size

• 요소의 배경 이미지 크기
• 값
  • auto [기본 값] : 이미지의 실제 크기
  • 단위: px, em, rem 등 단위로 지정
  • cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
  • contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

background-attachment

• 요소의 배경 이미지 스크롤 특성
• 값
  • scroll [기본 값] : 이미지가 요소를 따라서 같이 스크롤
  • fixed: 이미지가 뷰포트에 고정, 스크롤 X

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.