[CSS 기초] CSS background 배경을 제어하는 속성

CSS 배경을 제어하는 속성

오늘은 CSS 속성 중 배경을 제어하는 속성들에 대해 알아보겠습니다. 

 

✨ 배경 색상 조정 ( background-color )

배경 색상을 입력하는 방법에는 총 네 가지가 있습니다.

 

(1) 색상 이름

background-color: blue;

 

(2) 16진수 색상

background-color: #45a1de;

 

(3) RGB 색상 - Windows RGB 색상 표 (Red, Green, Blue)

background-color: rgb(69, 161, 222);

 

(4) RGBA 색상 -  RGB에 알파 채널 값을 더한 색상 값. 알파 채널(alpha channel)은 색상의 투명도를 나타내는 채널.

background-color: rgba(69, 161, 222, 0.5);

---

✨ 배경 이미지 제어 ( background-image )

background-image: 배경에 이미지 추가

background-image: url(img/picture.png);

url 괄호 안에 파일 경로와 파일이름을 써줍니다.

 

background-repeat: 배경이미지 반복 방법

background-repeat: no-repeat;

 background-repeat의 값에는

• repeat : 배경 이미지를 반복 (default)
• repeat-x : x축(가로방향)으로 배경이미지를 반복
• repeat-y : y축(세로방향)으로 배경이미지를 반복
• no-repeat : 배경 이미지 반복 안함

---

✨ 배경 이미지 크기 조정 ( background-size )

background-size: cover;

 background-repeat의 값에는

• auto : 원래 배경 이미지 크기만큼 표시 (default)
• contain : 배경 이미지가 요소 크기에 맞게 모두 표시
• cover : 배경 이미지가 요소의 크기에 관계없이 여백 없이 꽉차게 표시
• px % (단위로 크기 설정) : 사용자가 임의적으로 표시

---

✨ 배경 이미지 배치 조정 ( background-position )

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

background-position: left top;

• 가로 위치 값: left, center, right, px, %
• 세로 위치 값: top, center, bottom, px, %

---

✨ 배경 이미지 스크롤 조정 ( background-attachment )

배경이미지의 스크롤 여부를 정하는 속성

background-attachment: scroll;

background-attachment 의 값에는

• scroll : 내용을 스크롤 하면 배경이미지는 스크롤 되지 않음. (default)
• fixed : 배경이미지를 뷰포트에 고정. 
• local : 내용을 스크롤하면 배경이미지도 스크롤 됨.