CSS - Background 속성 (color,image 등)

 

1/ background-color

배경색을  넣음

 

hex  |  rgb  |  rgba

 

 

 

 

2/ background-image

배경으로 이미지를 넣음

 

- url() 함수를 사용해야함.

- url(이미지 경로) or url(이미지 주소)

 

.selector {
   background-image: url(./assets/image.png);
}

 

 

 

3/ backgroud-repeat

배경 이미지 반복 여부

 

repeat   |   no-repeat

 

대부분은 no-repeat 으로 함.

( default 값은 repeat임)

 

 

 

 

4/ background-size

배경 사이즈 (크기)

 

contain   |   cover   |    custom

 

 

contain	포함됨 (요소 안에 모든 면이 다 들어가게) - 빈공간 생겨도
cover	빈공간 없이 꽉 차도록 (사진 잘릴수 있음)

좌) contain     /    우) cover

 

 

custom의 경우에는background-size:  auto  100% 나background-size: 300px 100px 등 다양하게 자체적으로 설정 가능!

 

 

 

 

5/ background-position

 

x축 위치와 y축 위치 명시해줘야함.

 

background-position: center center;
/* x축으로 center에 놓고, y축으로도 center로 */

 

center   |   bottom, top, right, left   |   px, %, auto

 

 

가장 많이 사용하는 것은 center center이다!

 

 

 

---

 

REFERENCE.

 

 

background - CSS: Cascading Style Sheets | MDN