[css] 배경 이미지 고정하기

안녕하세요. 플입니다.

오늘은 배경 이미지를 고정해볼게요.

 

---

 1.  배경 이미지 고정 

 

배경 이미지가 고정된다는 말이 무슨 말이냐면

아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라

그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요.

그런 효과를 주는 css를 넣어줄 것입니다.

 

글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요.

포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요.

https://ssimplay.github.io/paintdrop/

paint drop

---

 2.  background

div{ background:url(../images/banner.jpg) no-repeat center center fixed; }

background에서 이미지를 넣어주고 마지막에 fixed를 넣어주면 고정할 수 있어요. 

코드가 좀 길지만 마지막 fixed만 기억하세요. 

 

하나씩 살펴보자면

 

url은 이미지의 주소예요.

background에 이미지를 넣어줄 때는 폴더 앞쪽에 ../를 넣어주는 것이 오류가 덜 발생하더라고요.

 

 

no-repeat는 반복하지 않겠다는 선언이에요. 이 것을 해주지 않으면 배경 이미지가 바둑판 모양으로 반복될 것이에요.

 

center center 부분은 x좌표 y좌표 그러니까 가로 세로 위치를 말해요.

배경 이미지를 어떤 기준에 둘 것인지 정할 수 있죠. 둘 다 center니까 정 가운데에 이미지가 올 거예요.

 

마지막으로 가장 중요한 fixed 이미지가 스크롤에 구애받지 않고 고정되어있어요.

색다른 느낌을 줄 수 있어서 좋아요.

 

---

그럼 이만.

총총.