[CSS] 배경 고정하기

css를 이용해 배경을 고정해 보겠습니다.

 

 

---

 

1. 구현 화면 확인

 

 

 

①  구현 화면

배경에 귀여운 멍무리가

고정되어 있고 스크롤이 내려가도

따라오지 않는 모습이 보이시나요?

 

기업에서도 종종 사용하는 기법인데

이 기능을 구현해 보겠습니다.

 

-

 

반응형

 

---

 

---

 

2. background-attachment: fixed;

 

div{ background-attachment: fixed; }

 

①  background-attachment

[background-attachment: fixed;]를

적용해 주시면 배경화면이 고정됩니다.

 

기본값은 scroll이에요.

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

background-attachment - CSS: Cascading Style Sheets | MDN

 

자세한 기능은 위의 링크에서 확인해 주세요.

 

 

 

320x100

 

---

 

 

 

②  코드로 보기

스크롤을 해보면서

배경이 어떻게 고정되어 있나 확인해 보세요.

 

background 설정은 보기 편하시라고

모두 분리해서 적어두었습니다.

 

https://ssimplay.github.io/

references

 

레퍼런스 사이트에서는

더 많은 코드 레퍼런스를 확인할 수 있습니다.

 

---

 

3. 냐울당

 

http://mmoori.com/

멍무리를 소개합니다.

 

①  멍무리 소개 사이트

예시로 사용된 멍무리 소개 사이트입니다.

실제 구현된 모습을 확인해 보세요.

 

 

 

---

 

냐울당 작가님의 작품을 구경하고 할인 쿠폰 받으세요!
https://idus.kr/FUqi5

냐울당

 

②  아이디어스

아이디어스에서는

멍무리 굿즈도 판매하고 있습니다~

많은 관심 부탁드려요 :)

 

 

 

---

이상으로  CSS로 배경 고정하기였습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[Design/포토샵] - [포토샵] 레이어 모두 합쳐서 새 레이어 만들기(+7월 배경화면 나눔)

[포토샵] 레이어 모두 합쳐서 새 레이어 만들기(+7월 배경화면 나눔)

 

[coding/html + css] - [CSS] 메뉴 상단에 고정하기 (sticky)

[CSS] 메뉴 상단에 고정하기 (sticky)

 

 

그럼 이만.

총총.

 

*정말 감사하지만 중복 댓글은 삭제하고 있습니다.