css 배경 이미지에 블러 필터 깔기

이미지 원본 / 블러 필터를 적용한 배경 이미지

배경 이미지에 블러 효과를 적용하면 콘텐츠에 집중하기가 더 쉬워집니다.

 

주기적으로 배경 이미지를 바꿔야 한다면, 이미지 자체에 블러 효과를 넣어 편집하기보다는 코딩으로 처리하는 게 더 간편하겠죠. 하지만 단순하게 body에 배경 이미지를 적용하고 필터를 넣는 것만으로는 배경에 블러 처리가 되지 않습니다. 아래 코드는 그 예로, 블러 효과가 적용되지 않습니다.

body {
    background-image: url(bg.jpg);
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
}

위 소스를 적용해 보면 원본 그대로의 이미지가 적용되어 있어요. body나 html에 설정된 배경 이미지에는 필터가 적용되지 않습니다. 그래서 꼼수를 써야 합니다. body나 html에 적용하는 것 대신, 배경인 척하는 요소를 뒤에 깔면 됩니다.

 

예를 들면, 이미지 태그를 넣고 이미지 자체에 필터 효과를 넣는 거예요. 그리고 이미지에 position:fixed를 주고 화면 전체를 덮도록 위치시키는 거지요. 또는 화면 전체를 감싸는 div를 만들어서, 이 div의 배경 이미지로 설정하고 div에 필터 효과를 주면 됩니다.

 

그렇지만 고작 배경 이미지를 만드는 데에 html 요소를 넣기는 좀 부담스럽습니다. 그럴 땐 가상 선택자를 이용합니다. 이를 이용하는 방법은 간단합니다. body에 가상 선택자를 넣고 배경 이미지를 설정한 다음, 화면 전체를 덮도록 위치시킵니다. 필터 효과를 주고, z-index 값을 -1로 해 제일 뒤로 가게 설정하면 됩니다. 코드는 다음과 같습니다.

body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(bg.jpg);
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
    z-index: -1; 
    content: "";
}

여기에서 배경 이미지가 이용자 모니터의 해상도보다 작을 경우, background-size: cover를 이용해 배경 이미지가 화면에 가득 차도록 크기를 조절할 수 있습니다. 억지로 늘리며 이미지가 깨지더라도 블러 효과가 적용되어 있으면 큰 결함이 되지 않습니다. 모바일 기기에 따라 뷰가 달라지지도 않고요. 일반적으로 body에 background-image를 적용하면 패턴 이미지가 아닌 이상 모바일 기기에 따라 배경 이미지가 다르게 보여서 맞추기 까다롭거든요.

 

다만 이렇게 적용한다면, 블러 필터를 넣은 것 때문에 배경 가장자리에 흐릿한 테두리가 생기게 됩니다. 아래 이미지의 테두리를 비교해 보세요.

블러 효과를 적용하여 테두리가 생긴 배경 / 블러 효과를 적용하고 테두리를 없앤 배경

우측 이미지처럼 테두리를 지우려면 어떻게 해야 할까요?

 

일단, transform: scale(1.02) 태그를 이용해 이미지 크기를 조금 키웁니다. 희미한 테두리는 블러 필터를 적용할 때 주는 수치 값만큼 생깁니다. 위에서는 filter: blur(5px) 태그로 테두리의 길이는 5px입니다. 만약 테두리의 길이가 길다면 배경도 그만큼 확대해 주어야 합니다.

그리고, html에 overflow: hidden 으로 배경 이미지를 확대하여 넘치게 된 부분(=희미한 테두리)을 보이지 않도록 설정합니다.

마지막으로 body에는 overflow: auto 값을 넣어서 스크롤이 생기게 합니다. body에 overflow: auto 를 설정해 주지 않으면 페이지에 스크롤 바가 생기지 않아요.

 

모두 합하면 아래 코드처럼 됩니다.

html	{ overflow: hidden; }
body	{ overflow: auto; }
body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(bg.jpg);
    background-size: cover;
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
    transform: scale(1.02);
    z-index: -1; 
    content: "";
}

 

이와 관련하여 읽어 볼 만한 글입니다. https://css-tricks.com/apply-a-filter-to-a-background-image

Apply a Filter to a Background Image | CSS-Tricks

저는 블러 필터에 한하여 설명하였지만, 다른 필터를 여러 개 사용하는 법에 대해서도 소개되어 있어요. 레이어를 이용해 이미지 편집 없이 코드만으로 이미지에 여러 효과를 줄 수 있으니, 필요하신 분은 읽어 보시는 게 좋을 것 같습니다.

 

직접 작성한 글이므로 스크랩 하실 때에는 출처를 남겨 주세요:)

 

---

2021년 9월 16일 수정

이 글을 처음 작성할 때에는 아래의 속성이 없었습니다. 해당 속성이 생긴 지 꽤 오래되었음에도 이 포스트를 열람하시는 분이 꽤 되어 첨언해 둡니다.

backdrop-filter: blur(5px);

지금은 해당 속성으로 편하게 백그라운드 이미지에 블러 처리가 가능하니 참고하세요!

background image를 설정한 곳에 해당 속성을 추가하기만 하면 됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

backdrop-filter - CSS: Cascading Style Sheets | MDN