[CSS] 배경 관련 스타일

배경색 지정 (background-color) 

background-color: 색상;

배경색 적용 범위 지정 (background-clip)

• border-box (기본값) : content, padding, border까지 배경 적용 
• padding-box : content, padding까지 배경 적용
• content-box : contents 영역만 배경 적용

background-clip : border-box;

배경으로 이미지 적용 방법

• background-image:url : 적용할 이미지 경로 지정
• background-repeat : 배경 이미지 반복 여부 지정
  • repeat : 가로 세로로 반복, 기본값
  • repeat-x : 가로로만 반복
  • repeat-y : 세로로만 반복
  • no-repeat : 반복x
• background-size : 배경 이미지의 사이즈 지정
  • auto : 이미지의 원래 크기를 유지, 이미지가 원래 크기보다 작으면 이미지가 확대되고 이미지가 원래 크기보다 크면 이미지가 축소
  • contain : 가로세로 상관없이 둘 중 하나가 가득찰 때까지 크기를 맞춤
  • cover : 이미지의 가로 너비나 세로 높이 중 하나가 화면에 가득 차도록 크기를 조정
  • px
  • %
• background-position : 배경 이미지의 위치 조정
• background-attachment : 배경 이미지의 스크롤 여부 지정
  • scroll : 스크롤 내려가면 이미지도같이 내려감, 기본값
  • fixed : 스크롤 이동이 있어도 이미지가 그 자리 그대로 고정됨

선택자{
    background-image:url("이미지경로");
    background-repeat: repeat/repeat-x/repeat-y/no-repeat;
    background-size: auto/contain/cover/px;
    background-position:좌/우/가운데중1 위/아래/가운데중1/px px/%;
    background-attachment:scroll/fixed;
}

투명도 조절 (opacity) 

• 이미지, 배경색 등에 적용 가능
• 숫자가 작을 수록 투명해짐

opacity : 0.7;