CSS에서 배경 이미지를 다루는 일은 생각보다 까다로울 수 있습니다. 코드에 배경 이미지를 제대로 설정했더라도, 다른 요인들 때문에 화면에 나타나지 않는 경우가 종종 있기 때문입니다.
이 글에서는 HTML과 CSS를 활용해 배경 이미지가 표시되지 않는 문제를 해결하는 네 가지 방법을 소개합니다.
1. HTML 파일에 CSS 파일이 올바르게 연결되어 있는지 확인하세요
웹사이트에 CSS 스타일이 적용되려면 HTML 파일 안에 <link> 태그를 추가해야 합니다. 이 태그는 <head></head> 태그 사이에 위치해야 하며, 다음과 같은 형태입니다:
<link rel="stylesheet" href="/style.css">CSS 파일이 제대로 로드되었는지 어떻게 확인할 수 있을까요?
가장 대표적인 신호는 웹사이트를 열었을 때 배경이 하얗고, 모든 텍스트가 Times New Roman 폰트로 표시되며, 색상이나 다른 스타일이 전혀 적용되지 않는 경우입니다.
또한 브라우저의 개발자 도구(검사기)를 활용할 수 있습니다. 페이지 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 뒤 '검사'를 선택하거나, Ctrl+Shift+I 키를 누르면 됩니다. 검사기에서 CSS 파일에 대해 404 not found 오류가 표시되거나, The resource... was blocked due to MIME type mismatch 같은 메시지가 보인다면 CSS 파일 로딩에 문제가 있다는 뜻입니다.
이런 오류가 보이고 웹사이트에 스타일이 전혀 적용되지 않았다면, 가장 먼저 확인할 것은 <link> 태그입니다. href 속성이 실제 CSS 파일명과 동일한 파일을 가리키고 있는지, 그리고 경로가 올바른지 확인하세요.
경로는 HTML 파일의 위치를 기준으로 상대적으로 지정해야 합니다. CSS 파일이 HTML 파일과 같은 폴더에 있다면 href를 style.css(또는 실제 CSS 파일명)로 설정하면 됩니다.
보통은 경로 앞에 슬래시(/)를 붙여 href="/style.css"처럼 작성하는 것이 좋습니다. 이렇게 하면 경로가 항상 웹사이트 루트(root)에서 시작됩니다.
서로 다른 하위 폴더에 있는 여러 페이지가 동일한 <head> 코드를 공유하는 경우에는 이 방식이 특히 유용합니다. 예를 들어 공통 코드를 사용하는 템플릿 기반 CMS(콘텐츠 관리 시스템)를 운영할 때가 그렇습니다.
2. background-image url에 이미지 경로가 올바르게 설정되어 있는지 확인하세요
CSS 파일 연결에 문제가 없음을 확인했다면, 이번에는 이미지 자체의 경로가 올바른지 점검해야 합니다. 마찬가지로 브라우저의 코드 검사기를 열어 확인하는 것이 좋습니다.
배경 이미지가 제대로 로드되었는지 어떻게 알 수 있을까요?
배경 이미지가 로드되지 않는 것처럼 보이고, 검사기에서 해당 이미지에 대한 404 오류가 표시된다면 이미지 자체에 문제가 있을 가능성이 큽니다.
이런 경우 이미지 파일명이 실제 파일과 정확히 일치하는지, 그리고 background-image: url() 안의 경로가 올바른 위치를 가리키는지 다시 한번 확인하세요.
중요한 점은 이미지 파일의 위치가 웹사이트 루트가 아니라 CSS 파일의 위치를 기준으로 상대적이라는 것입니다. 따라서 CSS 파일이 하위 폴더에 있다면, 루트에 있을 때와 경로가 달라질 수 있습니다.
이해를 돕기 위해 다음과 같은 웹사이트 파일 구조가 있다고 가정해 보겠습니다:
(project folder)
|-- index.html
|-- (css)
|-- style.css
|-- (img)
|-- cat-pic-1.jpg이 웹사이트는 프로젝트 루트에 index.html 파일이 있고, style.css 파일을 담고 있는 css 폴더, 그리고 cat-pic-1.jpg 이미지를 담고 있는 img 폴더로 구성되어 있습니다.
CSS에서 cat-pic-1.jpg를 배경 이미지로 불러오려면 파일 경로는 다음 순서를 거쳐야 합니다:
css폴더에서 한 단계 위로 올라가고,img폴더로 이동한 뒤,- 이미지 파일 자체를 불러옵니다.
따라서 CSS 파일의 background-image 속성은 다음과 같아야 합니다: background-image: url('../img/cat-pic-1.jpg').
../ 기호는 파일 구조에서 한 단계 위로 올라간다는 의미입니다.
같은 결과를 background-image: url('/img/cat-pic-1.jpg')처럼 설정해서 얻을 수도 있습니다.
이 방식은 슬래시(/)로 웹사이트 루트에서 시작한 뒤, img 폴더로 들어가 이미지 파일을 불러옵니다.
상위 폴더를 거슬러 올라가든, 웹사이트 루트에서 시작하든, 코드 검사기를 활용해 이미지가 정상적으로 로드되는지 아니면 404 오류가 발생하는지 반드시 테스트하고 확인하는 것을 잊지 마세요.
3. 요소의 너비 또는 높이를 명시적으로 설정하세요
이미지가 표시되지 않는데도 404 오류가 전혀 없다면, 코드 검사기에서 해당 요소 자체를 살펴보세요.
요소 안에 HTML 콘텐츠가 없다면 너비나 높이가 0일 수 있습니다(둘 다 0일 수도 있습니다!). 이 경우 배경 이미지가 기술적으로는 정상적으로 로드되었더라도, 요소 자체의 크기가 0px라면 사실상 화면에 보이지 않습니다.
위 예시는 웹사이트와 코드 검사기를 함께 보여줍니다. 오른쪽 패널에서 .card__image 요소에 마우스를 올리면, 왼쪽 패널의 해당 요소 위에 레이블이 나타나며 너비가 354px, 높이가 0px라고 표시됩니다.
높이가 0px라는 것은 그 요소가 화면에 보이지 않는다는 뜻입니다.
이를 해결하려면 .card__image 요소의 높이를 height: 120px처럼 명시적으로 지정하세요. 만약 요소 안에 길이가 변하는 텍스트 콘텐츠가 들어갈 수 있다면, 대신 min-height: 120px로 설정하는 것이 좋습니다. 이렇게 하면 최소 높이는 120px로 유지되면서, 텍스트 콘텐츠에 더 많은 공간이 필요할 경우 그보다 커질 수 있습니다.
4. CSS 배경 속성의 문법이 올바른지 확인하세요
마지막으로 확인할 것은 배경 관련 CSS 속성의 문법이 올바른지 여부입니다.
자주 사용되는 배경 속성과 가능한 값들은 다음과 같습니다:
background-color: #000000;background-image: url("/landscape1.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;
또한 여러 값을 하나의 스타일 규칙으로 합칠 수 있는 단축 속성(shorthand)인 background를 사용할 수도 있습니다:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;이 단축 속성에 여러 값을 사용할 때는 문법이 정확한지 꼭 확인해야 합니다. 각 배경 속성의 순서는 크게 중요하지 않지만, background-size를 설정할 때는 주의해야 할 함정이 하나 있습니다.
background-size 값은 background-position 값 바로 뒤에 슬래시(/)로 구분하여 붙여 쓸 때만 유효합니다. 위 예시에서는 center/cover로 표현되며, 여기서 center는 background-position, cover는 background-size입니다.
background-position 값은 단독으로 사용할 수 있지만, cover만 단독으로 사용하려고 하면 해당 CSS 규칙 전체가 무효가 되어 모든 배경 속성이 전혀 작동하지 않게 됩니다.
이런 경우 코드 검사기에서 다음과 같이 무효화된 규칙을 확인할 수 있습니다:
