[CSS] background

 

background 배경

 
 

속성	설명
background-color	배경색 지정
background-img	배경 이미지 삽입
background-repeat	배경 이미지 반복 여부 지정
background-size	배경 이미지 크기
background-position	배경 이미지 위치
background-attachment	배경 이미지 스크롤할 때 모습
background	모든 배경 속성을 한 번에 사용할 수 있는 단축 속성

 
 

---

 

1. background-color

 

• 요소의 배경에 색상을 넣을 수 있다. 

 
 

---

 

2. background-image

 
 

• background-image:url('이미지 경로');

 
 
[⚠️ 주의 사항]
 
1. 요소의 배경 크기가 반드시 있어야 한다. 요소의 배경에 이미지를 삽입하는 원리이기 때문에 요소의 너비와 높이를 지정하지 않으면 이미지가 보이지 않는다. 너비와 높이를 반드시 지정한다.

2. 이미지의 크기가 요소의 배경 크기와 맞지 않으면 어색하게 보인다. 
 
 

---

 

3. background-repeat

 

• 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로 반복해서 채운다.

 

속성값	설명
no-repeat	이미지를 반복하지 않는다.
repeat-x	이미지를 가로 방향으로 반복
repeat-y	이미지를 세로 방향으로 반복
repeat	이미지를 가로와 세로 방향으로 반복
round	이미지를 반복하되 이미지가 요소에 딱 맞도록 크기를 자동 조절
space	이미지가 잘리지 않도록 반복

 
 

---

 

4. background-size

 
요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제는 해결할 수 없다. 그 대신 이문제는 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있다.
 

속성값	설명
auto	이미지 크기 유지
cover	이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경을 꽉 채운다.
contain	이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소한다.
너비높이	이미지 크기를 직접 지정

 
 

• ⚠️ 하지만 cover일 때 이미지 일부가 잘린다. ( *더 많이 사용)
• contain일 때도 비율을 유지하면서 이미지가 배경 요소에 꽉 차도록 확대하지만, 배경의 가로와 세로 중 한 부분이 가득 차면 그 상태에서 멈춘다. 그리고 못 채운 부분은 이미지를 반복해서 채운다.
• 반복하고 싶지 않다면, background-repeat: no-repeat 사용

 
 

---

 

5. background-position

 
 

• 삽입하려는 이미지의 위치도 결정할 수 있다.
• background-position: <x 위치><y 위치>

 

위치	속성값	설명
x	left, center, right	x축(가로) 방향의 위치를 지정
y	top, center, bottom	y축(세로) 방향의 위치를 지정
공통	px, rem, em, %	위치를 직접 지정

 

• 속성값 1개만 사용해도 되고, 2개를 사용해도 된다
• 값을 1개만 사용하면 지정한 값은 x축 값이 되고, y축 값은 기본으로 center가 된다.
• 2개를 사용하면 각각 x축과 y축 값으로 지정된다.

 
 
참고로 100%는 비율에서 가장 큰 값이기 때문에 x축에 사용하면 가장 오른쪽, y축에 사용하면 가장 아래쪽을 의미한다. 
 
 

---

 

6. background-attachment

 
 

• 요소에 삽입된 이미지를 스크롤할 때, 이미지 작동 방식을 결정한다.

 

속성값	설명
local	삽인된 이미지가 요소와 웹 브라우저에서 모두 스크롤된다.
scroll	삽입된 이미지가 요소에서는 고정되지만, 웹 브라우저에서는 스크롤 된다.
fixed	삽입된 이미지가 요소와 웹 브라우저에서 모두 고정된다.

 
 

---

 

7. background 속성으로 한 번에 지정하기 ⭐

 
 

background: <color 속성값><image 속성값><repeat 속성값><position 속성값/size 속성값><attachment 속성값>;

 

• background-size 속성만은 항상 background-position 속성값을 먼저 작성하고 나서 슬래시(/)로 구분한 후 사용해야 한다.
• 되도록 background 속성을 사용하지 말고 속성을 하나씩 작성해서 사용하기를 권한다. (?)

 

---

 

HTML과 CSS 차이 ⭐

 

 
HTML <img src="">

• 주로 콘텐츠 요소로 사용 (ex. 카드 텐츠)
• 의미 있는 이미지
• 경로가 잘못되었을 때 [X박스]로 뜬다.
• 스케일을 줄였을 때 정비율로 줄어듦

 
CSS background: url()

• 배경 역할로 꾸밈으로 쓸 때
• 의미 없이 깔리는 이미지
• 이미지를 불러오지 못했을 떄 X박스 뜨지 않는다.
• 비율이 달라졌을 때 이미지가 찌그러짐

 
 
📕참고: