CSS 기본 속성(4) 배경 속성

 

 

---

 

< 배경 속성>

 

background-color

- 요소의 배경 색상

- 기본값 transparent (투명)

- Hex , rgb, rgba

 

background-image

- 요소의 배경 이미지 삽입

- 기본값 none

- url("경로") - 이미지 경로 삽입

 

.img {
  background-image: url("./image/logo.jpg")
}

 

background-repeat

- 요소의 배경 이미지 반복

- 기본값 repeat

- repeat-x (수평 반복) , repeat-y (수직 반복) , no-repeat

 

=> 기본값과 no-repeat 적용

 

background-position

- 요소의 배경 이미지 위치

- 방향 : top, bottom, left, right, center

- 단위: px em rem -> x축, y축으로 적용

 

background-size

- 요소의 배경 이미지 크기

- 기본값 auto (이미지의 실제 크기)

- 단위 : px em rem

- cover : 비율을 유지. 요소의 더 넓은 너비에 맞춤

- contain : 비율을 유지. 요소의 더 짧은 너비에 맟춤

 

=> cover , contain 적용

 

background-attachment

- 요소의 배경 이미지 스크롤 특성

- 기본값 scroll : 이미지가 요소를 따라 같이 스크롤

- fixed : 이미지가 뷰포트에 고정