오디세이 스킨 편집: 타이틀 배경 이미지 고정(Fix) 시키기

포스팅 페이지를 보다 문득 타이틀 배경에 깔린 배경이미지를 스크롤과 상관없이 고정시키고 싶어졌습니다. 워드프레스, 엘리멘터를 사용했을 때는 Background 이미지에 Position을 Fix로 변경하면 간단히 되었는데요. 검색을 하다보니 티스토리 스킨 내에서도 간단히 해결할 수 있었습니다.

 

해당 셀렉터를 찾아서 background-attachment:fixed; 추가하기

.article-header에서 배경 이미지를 조정하는 부분을 확인 후 background-attachment를 추가해 주었습니다.

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 400px;
    margin-left: -50vw;
    padding: 0 20px;
    background-size: cover;
    background-position: center bottom;
    background-attachment:fixed;
}

 

추가하고 나니 배경 이미지의 위치가 맘에 들지 않았는데요. background-position을 50% 50%; 에서 center bottom; 으로 세로축은 하단 정렬로 수정했습니다.

 

background-position: center bottom;

 

조금 더 그럴싸한 스크롤 경험을 줄 수 있어서 간단한 것이지만 만족스럽습니다. 약간이지만 스크롤하면서 보이지 않았던 배경이미지의 부분이 보이는 효과를 볼 수 있습니다. 다만 모바일 등의 환경처럼 가로폭이 다르면 보이는 배경이미지의 부분이 달라지기에 참고해야 합니다.

 

아이폰에서 적용 문제

아이폰에서는 스크롤 성능 저하 문제로 브라우저 자체에서 background-attachment:fixed; 를 사용하지 못하게 잠그어 두었다고 하네요. 아이폰에서 티스토리를 들어올 경우 배경 이미지가 제대로 표현이 안되었습니다.

 

배경이미지를 고정하면 이미지가 크게 확대되어 형태를 알아보기 힘듭니다.

 

그래서 아쉽지만 모바일은 배경 고정을 풀기로 합니다.

 

아이폰 사파리에서 background-attachment: fixed 문제

 

.article-header의 미디어 쿼리가 들어간 부분을 검색해서 미디어쿼리 하단에 .article-header 부분을 새로 추가해 주었습니다. 모바일에서 배경이미지의 위치는 다시 센터에 위치하도록 고쳤습니다.

 

그런데 오디세이 스킨은 가로 1060px부터 모바일 레이아웃으로 변경되는데요. 문제는 아이패드 가로폭의 경우 가로 1060px을 넘는 경우가 있습니다. 아이패드 또한 아이폰과 똑같은 정책을 받기 때문에 아이패드 가로폭에서는 타이틀 이미지가 제대로 표현 되지 않습니다.

 

그래서 .article-header 관련 미디어쿼리는 1060px 조건 안에 있어서 기존 미디어쿼리 안에 추가 하지 않고 1280px에서 변경되는 미디어쿼리를 따로 추가해 주었습니다. 

 

@media screen and (max-width: 1280px) {
    
    .article-header {
    background-position: center center;
    background-attachment: local;
    }
    
}

 

워드프레스+엘리멘터를 사용할 때는 배경 이미지를 고정한 경우 모바일은 자동으로 스크롤 되도록 풀렸는데요. 티스토리는 따로 설정이 되어 있지 않고 직접 수정해주어야 하는 것으로 보입니다.

 

---

 

참고 링크

[CSS3] background - 배경이미지가 고정되거나 스크롤과 같이 움직이도록 만들기

CSS / background-position / 배경 이미지의 위치를 정하는 속성