[CSS] background 속성 총정리

🎯 background 총정리

• background의 모든 것을 알아보자!

 

📝 background 속성

• background-color : 배경색
• background-image : url("filename.xxx") : 배경 이미지
• background-repeat : 배경 이미지 반복 설정
  • repeat(가로세로 반복), no-repeat(반복 X), repeat-x(가로만 반복), repeat-y(세로만 반복)
• background-attachment : 배경 이미지를 스크롤과 무관하게 해당 위치에 고정
  • scroll : 기본값
  • fixed : 배경 이미지는 고정되고 내용물만 스크롤
• background-position : 배경 이미지 상대 위치 설정
• background-size : 배경 이미지 크기 조절
  • contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 확대 or 축소하는 효과. 이미지 가로 세로 비율은 유지. 배경 이미지가 공간 안에 다 나타나면서 여백이 생긴다.
  • cover : 말 그대로 공간 안에 이미지를 확대하여 cover. 가로 세로 비율을 유지. 이미지 잘림.

 

📌 참고

• CSS Backgrounds
• 코딩교육 티씨피스쿨