배경색 지정 (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;