CSS에서 배경 이미지로 작업하는 것은 까다로울 수 있습니다. 코드에서 설정하더라도 페이지에 배경 이미지가 표시되지 않을 수 있는 다른 요소가 있기 때문입니다.
이를 돕기 위해 HTML 및 CSS를 사용하여 작동하지 않는 배경 이미지를 수정하는 네 가지 방법이 있습니다.
1. CSS 파일이 HTML 파일에 올바르게 연결되어 있는지 확인하십시오.
CSS 스타일을 웹사이트에 로드하려면 <link>를 추가해야 합니다. HTML 파일에 태그를 추가합니다. 이 태그는 <head></head> 안에 있어야 합니다. 태그이며 다음과 같아야 합니다.
<link rel="stylesheet" href="/style.css">CSS 파일이 올바르게 로드되었는지 여부를 어떻게 알 수 있나요?
한 가지 표시는 웹사이트를 로드하고 배경이 흰색이고 모든 텍스트가 Times New Roman 글꼴처럼 보이고 색상이나 다른 스타일이 없는 경우입니다.
페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하거나 Ctrl-Shift-I를 눌러 브라우저의 검사기 도구를 확인할 수도 있습니다. 검사기에서 404 not found라는 오류가 표시되는 경우 CSS 파일의 경우 또는 The resource... was blocked due to MIME type mismatch , CSS 파일을 로드하는 데 문제가 있음을 알려줍니다.
이러한 오류 중 하나가 표시되고 웹사이트가 스타일이 지정되지 않은 것처럼 보이면 가장 먼저 확인해야 할 사항은 <link> 꼬리표. href 속성이 실제 CSS 파일과 동일한 파일 이름을 로드하고 경로가 올바른지 확인합니다.
경로는 HTML 파일이 있는 위치에 상대적이어야 합니다. CSS 파일이 HTML 파일과 같은 디렉토리에 있으면 href를 설정할 수 있습니다. style.css (또는 CSS 파일 이름이 무엇이든).
나는 보통 슬래시 /를 넣습니다. 경로 앞(예:href="/style.css") . 이렇게 하면 경로가 웹사이트 루트에서 시작됩니다.
동일한 <head>를 로드하는 다른 하위 폴더에 페이지가 있는 경우 필요할 수 있습니다. 암호. 예를 들어 공유 코드가 있는 템플릿 CMS(콘텐츠 관리 시스템)를 사용하는 경우입니다.
2. background-image URL에서 이미지 경로가 올바르게 설정되었는지 확인하십시오.
CSS 파일이 올바르게 연결되었는지 확인한 후 이미지 자체가 올바르게 설정되었는지도 확인하십시오. 다시 한 번, 브라우저에서 코드 검사기를 열어 확인하고 싶을 것입니다.
배경 이미지가 올바르게 로드되었는지 확인하는 방법
배경 이미지가 로드되지 않는 것 같고 이미지 검사기에 404 오류가 표시되면 이미지 자체에 문제가 있다는 좋은 표시입니다.
이 경우 이미지 파일 이름이 실제 파일과 일치하는지, background-image: url()의 경로를 다시 확인하세요. 올바른 위치로 이동합니다.
이미지 파일의 위치는 웹사이트 루트가 아니라 CSS 파일 자체의 위치에 상대적이어야 합니다. 따라서 CSS 파일이 하위 폴더에 있는 경우 CSS 파일이 루트에 있는 경우와 경로가 달라야 할 수 있습니다.
설명을 돕기 위해 다음과 같은 웹사이트 파일 구조가 있다고 가정해 보겠습니다.
(project folder)
|-- index.html
|-- (css)
|-- style.css
|-- (img)
|-- cat-pic-1.jpg
이 웹사이트에는 index.html이 포함되어 있습니다. 프로젝트 루트의 파일, css style.css가 포함된 폴더 파일 및 img cat-pic-1.jpg 이미지가 포함된 폴더 .
CSS 스타일에서 cat-pic-1.jpg를 로드하려는 경우 배경 이미지로 파일 경로는 다음과 같아야 합니다.
css에서 한 단계 위로 이동 폴더,img로 이동 폴더,- 그런 다음 이미지 파일 자체를 로드합니다.
background-image CSS 파일의 속성은 다음과 같아야 합니다. background-image: url('../img/cat-pic-1.jpg') .
../ 기호는 파일 구조에서 한 단계 위로 이동한다는 것을 의미합니다.
background-image: url('/img/cat-pic-1.jpg')을 설정하여 동일한 작업을 수행할 수 있습니다. .
이 접근 방식은 슬래시(/ ) 웹사이트 루트에서 시작한 다음 img 이미지 파일을 로드할 폴더입니다.
따라서 상위 폴더를 탐색하든 웹사이트 루트에서 시작하든 상관없이 코드 검사기를 활용하여 이미지가 로드 중이거나 404 오류가 발생하는지 테스트하고 확인하는 것을 잊지 마십시오.
3. 요소의 너비 및/또는 높이를 명시적으로 설정합니다.
이미지가 표시되지 않지만 404 오류가 발생하지 않는 경우 코드 검사기로 이동하여 요소 자체를 확인하세요.
요소에 HTML 콘텐츠가 없으면 너비나 높이가 0일 수 있습니다(또는 둘 다!). 이것은 배경 이미지가 기술적으로 올바르게 로드되더라도 0px이면 요소 자체가 본질적으로 보이지 않음을 의미합니다. 크기입니다.
웹사이트와 코드 검사기를 보여주는 위의 예를 확인하십시오. .card__image 위로 마우스를 가져가면 요소가 오른쪽 창에 있는 경우 레이블이 왼쪽 창의 요소 위에 나타나 354px가 있음을 알려줍니다. 너비 및 0px 높이.
그 0px height는 요소가 표시되지 않음을 의미합니다.
이 문제를 해결하려면 .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;
약식 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 규칙은 유효하지 않고 없음이 됩니다. 배경 속성이 전혀 작동하지 않습니다.
이 경우 코드 검사기에서 다음과 같이 잘못된 규칙을 볼 수 있습니다.
