2011-11-08 10 views
2

페이지를 보려고 시도 할 때 아무 것도 나타나지 않는 배경 이미지가 있습니다 (repeat-x). 나는 또한 하루 중 여러 시간에 다른 CSS 파일을 사용하기 위해 javascript를 사용하고 있지만 방화범이 끌리는 CSS 파일이 헤드에 추가 된 것을 보여주기 때문에 문제가 아닌 것으로 확신합니다.배경 이미지가 표시되지 않습니다.

편집 : 문제는 브라우저에서 파일을 찾을 수 없다는 것입니다. 그러나 링크를 시도 할 때 파일을 찾을 수 없습니다.

여기에서 사이트의 보관 파일을 다운로드 할 수 있습니다. http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip 약 200kb 밖에되지 않습니다. 거대한 것도 없다.

+0

자원 확인의 관점에서 무엇을 지르고 있는지,하지만 크롬에 당신이 볼 수있는 유효한 파일 (자원 탭) URL 경로가 점하는 경우. 아마도 브라우저가 배경 이미지를 찾을 수 없습니까? – musefan

답변

1

그리고 이미지 파일의 경로가 맞습니까? Firebug가 이미지를로드합니까?

파일 구조에서, 지금은 아마이

index.html 
css/ 
    style.css 
img/ 
    night/ 
     night-tile.png 

처럼 당신의 style.css 당신이 당신의 이미지 파일을 상대 경로를 사용해야합니다. 따라서 img/night/night-tile.png은 아니지만 ../img/night/night-tile.png입니다. 경로에서 css 디렉토리 내의 이미지를 찾고 있는데 잘못되었습니다.

== 업데이트 == 당신의 코드를 다운로드 한 후 나는 2 이상의 오류를 발견했다.

첫 번째는 스타일 시트에 링크하는 <link> 요소에 rel=stylesheet을 추가하는 것을 잊었다는 것입니다. 이렇게하면 브라우저가 스타일 시트라는 것을 알 수 없습니다.

두 번째는 night.css에서 첫 번째 규칙의 마지막에 ;을 추가하는 것을 잊어 버리므로 구문 분석 오류가 발생하여 백그라운드 규칙이 렌더링되지 않습니다.

이러한 문제를 해결하는 행운을 비세요!

+0

시도했지만 파일을 찾을 수 없습니다. – Mythrillic

+0

컴퓨터/서버에서 경로를 찾을 수 있다고 생각하십니까? – vindia

+0

할 수는 있지만 작동하지 않는 것 같습니다. 사이트를 압축하여 링크를 제공합니다. – Mythrillic

0

요소의 높이가 없습니다 (명시 적 또는 내용 기준).

이것은 이미지를 볼 수있는 요소의 보이는 픽셀이 없음을 의미합니다.

2

사업부는 크롬 브라우저가있는 경우, CSS

#header { 
    background-image:url(img/night/night-time-tile.png); 
    background-repeat:repeat-x; 
    position:absolute; 
    height:100px; // Adjust height according to your image height 
    top:0; 
    left:0; 
} 
1

다음 displayed.Try 얻을 배경 이미지가 나타납니다 요소를 검사하지 않습니다 헤더에서 텍스트가 없기 때문에. 파이어 버그 창

background-image:url(img/night/night-time-tile.png); 

및 이미지의 전체 경로를 볼 수있는 배경 이미지 선언을 통해

호버.

스크린 샷에서 페이지 상단의 stackoverflow 로고와 동일한 것을 볼 수 있습니다.

그런 다음 CSS 선언을 클릭하고 이미지의 올바른 경로를 찾을 때까지 URL을 변경할 수 있습니다.

enter image description here

+0

이것은 많은 도움이되었습니다. 나는 파일 이름을 바꾸어야 만했다. 나는 이유가 없지만 지금은 효과가 있습니다. ;) – Mythrillic

+0

@ Adam543i - 도와 줘서 기뻐요. –

관련 문제