[CSS] background(배경)

1. 배경색(background-color)

- HTML 요소의 배경색을 설정
color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드)

background-color: 색깔명 혹은 RGB코드;

2. 배경 이미지(background-image)

- HTML 요소의 배경으로 나타날 배경 이미지를 설정
https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

background-image: url("파일경로");

3. 배경 이미지 크기(background-size)

- px단위와 %단위는 하나만 쓸 경우 가로크기를 그 크기로 정해주고 세로크기는 비율을 맞추어서 알아서 설정

• px
  background-size: 가로크기px 세로크기 px;
• %
  background-size: 가로퍼센트% 세로퍼센트%;
• cover
  - 그 요소 전체를 감쌀 수 있는 크기로 배경을 설정(그 중에서 가장 작게)
  background-size: cover;

4. 배경 반복(background-repeat)

- 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정

 

repeat(기본값) : 수평 수직 반복
repeat-x : 수평 반복

repeat-y : 수직 반복
no-repeat : 반복 없음

background-repeat: 명령어;

5. 배경 이미지 위치(background-position)

background-position: 가로위치 세로위치;

• 가로위치
  left, center, right / px값, %값(왼쪽 테두리에서 떨어져있는 값)
• 세로위치
  top, center, bottom / px값, %값(왼쪽 테두리에서 떨어져있는 값)

- 보통 center를 많이 씀

6. background

- 배경에 관련된 속성을 한번에 적용

background: url("파일경로") 반복여부 위치 / 사이즈 색깔;

7. 예시

• 예시1

• 예시2