html/css 배경화면 이미지 고정 or 스크롤에 따라오게 하기(background attachment 종류 및 해석)

한 동안 본 페이지의 메뉴버튼을 누르면,

뒤에 있던 벚꽃 배경이 따라와

가독성을 침해 했다.

사실, 이는 css에서 menu와 관련해서 position을 fixed로 설정했기 때문이다. 그래야 스크롤을 해도 백그라운드 배경(벚꽃)이 왼쪽 상단에 고정 되었기 때문이다.

 

그렇다면 스크롤을 내리면 배경화면(벚꽃)이 사라지게 할 수는 없을까?

있다. 배경화면 이미지를 크게 만들어서 고정 시켜 놓으면 벚꽃은 그 위치에 고정되어 스크롤에 따라오지 않는다.

하지만 이는 모든 디스플레이에 대응 할 수 없는 저급한 방법이다.

디스플레이의 해상도, 크기 우리는 이 것을 모두 상정 할 수 없다. 그리고 반응 할 수 없다.

그리햐야 우리는 background-attachment속성을 이용한다.

 

background-attachment속성에는

키워드로는 scroll, fixed, local;

전역값으로는 inherit, initial, unset; 이 있다.

 

이번 강좌에서는 키워드값만으로도 해결이 가능하다.

• scroll이나 fixed는 겉으로 보기에는 기능이 똑같다. 백그라운드에 고정이 되어 기존에 있던 벚꽃처럼 가독성을 헤치며 그 자리를 고수한다. 쉽게 부동산에서 알박기라고 생각하면 쉽다. 다만, 차이가 있다면, fixed는 뷰포트에 scroll은 테두리에 고정 시키는데 그 차이를 둔다.
• 오늘 우리가 사용 해야 할 것은 local이다. 말 그대로 백그라운드를 그 자리에 지박령으로 만든다는 의미다.

예제는 이 것을 보면 된다.

https://superkts.com/css/background-attachment

CSS 공작소 : background-attachment

절대 만들기 귀찮아서 안 만드는 거 맞다.

 

그래도 하나 만들어보자면,

각각의 스크롤바를 움직여 보세요. 그리고 화면도 스크롤해 보세요.

scroll
포항대게횟집
영덕군 강구면
강구대게길22
054-734-0458

fixed
포항대게횟집
영덕군 강구면
강구대게길22
054-734-0458

local
포항대게횟집
영덕군 강구면
강구대게길22
054-734-0458

이런 느낌이다. 첫번째는 scroll로 뷰포트가 아닌 현재 테두리에 맞춰 고정 된 것이고, 두번째는 fixed로 현재 뷰표트, 즉 익스플로러 창에 고정 된 차이를 알 수 있다.