🎨Styled-Components 이용 시Background url()에 이미지 주소 넣기

1. backround에 사용할 이미지 import 해오기

2. url(${}) 형태로 import 해 온 이미지 넣기

(+) background 속성

background-color

• 배경 색 설정

background-image

• 배경 이미지 설정

background-repeat

• 배경 이미지의 반복 여부 설정
• default는 repeat이고, repeat-x와 repeat-y를 통해 각각 가로, 세로의 방향으로 반복 여부를 결정할 수 있으며 no-repeat을 통해 반복하지 않을 수도 있다.

background-position

• 배경 이미지의 위치 설정
• 좌측 상단에 위치시켜 주는 0% 0%이며 %를 통하여 좌측 상단으로부터 떨어져야할 값을 정할 수 있으며, top, left, tight, bottom,center 키워드로 배경 이미지의 위치 지정이 가능하다.

background-size

• 배경 이미지의 크기 설정
• default는 auto이고, 이는 이미지의 본연 크기 그대로를 의미한다. cover은 이미지가 잘리더라도 주어진 영역을 완전히 덮을 수 있도록 이미지의 크기를 맞추어 준다. contain은 빈 공간이 생기더라도 배경 이미지가 주어진 영역 안에 모두 들어올 수 있도록 이미지의 크기를 맞춰준다.
  

background-attachment

• 주어진 영역을 스크롤할 때 배경 이미지도 스크롤 되는지 여부 설정
• default는 scroll이고 배경 이미지가 스크롤시 페이지와 함께 스크롤 되는 것이고 fixed는 배경 이미지가 스크롤시 움직이지 않고 고정되어 있는 것이다.