background-image : 이 속성을 사용하면 배경이미지 지정 가능
<aside> 🥕 url을 속성값으로 넣어줘야함
</aside>
background-repeat : 속성을 사용하여 배경의 반복을 지정할 수 있음
<aside> 🥕 repeat : 반복 O (기본값)
no-repeat : 반복 X
repeat-x : x축 반복
repeat-y : y축 반복
</aside>
아무것도 안써서 기본값 = repeat
no-repeat
repeat-x (x축으로 반복)
repeat 안 쓴거(기본이 repeat)
no repeat
repeat-x 오른쪽으로 반복 / y 하면 세로로 반복
background-size : 속성을 이용해서 배경 이미지 크기 지정 가능
<aside> 🥕 왼쪽 입력 : 가로 크기 오른쪽 입력 : 세로 크기
</aside>
왼쪽 입력 300px 오른쪽 입력 270px
background-position : 속성을 이용해서 배경의 위치 지정 가능
<aside> 🥕 왼쪽 입력 : 왼쪽 벽에서 떨어진 길이 / left(왼쪽 딱붙), center(가운데로), right(오른쪽 딱붙) 사용 가능
오른쪽 입력 : 위쪽 벽에서 떨어진 길이 / top(맨위 딱붙), center(가운데로) , bottom(맨아래 딱붙) 사용 가능
→ ?? 왼쪽 오른쪽 순서가 이상함 top center이랑 center top이랑 결과가 똑같음! → 사실 순서는 상관 없었다….
</aside>
좌우 가운데로
맨위에 붙고 좌우 가운데로
50% 50% 하면 왼쪽에서 50% 위에서 50% 떨어진 위치
background-attachment : 속성을 사용하여 배경 이미지를 고정할 것인지 원하는 위치에만 놔둘 것인지 선택 가능
<aside> 🥕 fixed : 스크롤에 따라 화면에 고정되는 형태 (스크롤 해도 계속 그 자리에 고정)
scroll : 원본 화면에 위치해 놓고 움직이지 않는 형태 (한 자리에 사진이 위치하고 스크롤로 볼 수 있음)
</aside>
fixed 고정
scroll scroll 해야 볼 수 있음