본문 바로가기
coding/css

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

by 씸플레이 2020. 4. 22.
728x90
반응형

안녕하세요. 플입니다.

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

 


 1.  배경 이미지 고정 

 

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

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

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

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

 

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

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

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

 

paint drop

우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가보는 곳 없이 기웃거리며 미끄러져들어가 그 속으로 스며들어간다. 하나씩 알아가는 세상은 반짝임으로 가득할 것만 같다. 그 속에서 알아가는 친구들과의 유쾌한 만남. 때로는 함께 놀기도하고, 때로는 모험을, 또 때로는 조언을 구하기도하는 그 유쾌함속으로 당신을 초대합니다.

ssimplay.github.io


 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 이미지가 스크롤에 구애받지 않고 고정되어있어요.

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

 


그럼 이만.

총총.

728x90
반응형

댓글0