-
background
- 배경 속성 색상,이미지,원점,크기,반복등 여러 배경 스타일을 지정
| 속성 |
설명 |
| background-image |
배경 이미지 삽입 |
| background-size |
배경 이미지 크기 지정 |
| background-repeat |
배경 이미지의 반복 형태 지정 |
| background-attachment |
배경 이미지의 부착 형태 지정 |
| background-position |
배경 이미지의 위치 지정 |
| background |
한 번에 모든 배경 속성 입력 |
background-image
- 배경이미지 넣기 사용법 : background-image: url("이미지 경로")
background-repeat
- background-reapeat:repeat; - 요소의 배경 영역을 채울 때까지 이미지 반복 반복이미지가 넘칠경우 잘라냄
- background-repeat: repeat-x; - 가로로 요소 배경 영역을 채울 때까지 이미지 반복
- background-repeat: space; - 요소가 잘리지 않을 만큼 이미지 반복 처음과 마지막 반복이미지는 요소의 양쪽끝에 고정 각 이미지 사이에 남은 여백을 고르게 분배
- background-repeat: no-repeat; - 이미지를 반복하지 않음 배경 이미지 영역이 다 차지 않을 수 있음
background-position
- 배경 이미지를 위치(좌표)이동
- background-position: top; - 요소를 배경 위쪽으로 이동
- background-position: bottom; - 요소를 배경 아래쪽으로 이동
- background-position: left; - 요소를 배경 왼쪽으로 이동
- background-position: right; - 요소를 배경 오른쪽으로 이동
- background-position: center; - 요소를 배경 가운데로 이동
- background-position: (%,px) - 요소를 단위 만큼 이동
background-size
- 배경 이미지 크기 지정
- 화면단위 :% px(고정크기)
- vw(뷰포트 가로크기) vh(뷰포트 세로크기) 반응형 디자인 단위
- background-size : 가로크기, 세로크기