모든 브라우저에서 배경 이미지가 작동하지 않습니다.

Question

저는 머리글과 바닥 글에 배경 이미지를 넣으려고합니다. VS에서 디자인 탭을 클릭하면 작동하는 것처럼 보이지만 웹 응용 프로그램을 실행하면 배경 이미지가 표시되지 않습니다. 당신은 발견 할 것이다으로

내 스타일 시트는

#Header { 
    height: 150px; 
    width:1020px; 
    background-color:gray; 
    background-image:url('images\bg-image.png'); 
    background-position-x:right; 
    font-size:30px; 
    font-family:Arial; 
} 

#Footer { 
    background-color:gray; 
    background-image:url("e:\...\images\footer-image.png"); 
    width:1020px; 
    height:80px; 
    text-align:center; 
    font-family:Arial; 
    font-size:13px; 
    margin-top:5px; 
} 

, 나는 이미지의 경로를 변경 시도했다하지만 여전히 나에게 동일한 결과를주고 있어요.

내 VS 이미지 디렉토리

결과 (나는, IE, 크롬에 FF를 시도했습니다)

나는 누군가가 도움이되기를 바랍니다 실행될 때 나에 관해서. 고맙습니다!

Answer 1

이것은 거의 확실한 경로 문제입니다. 웹 루트의 전체 경로를 사용해보십시오.

/* Assuming the images directory is in the web root.*/ 
background-image:url('/images/bg-image.png'); 

Answer 2

url("e:\...\images\footer-image.png")을 사용하지 마십시오. 웹 페이지가 너무 file 방식을 사용하여 액세스하는 경우

url("file:///e:/.../images/footer-image.png") 

그러나, 당신은 단지 그것을 사용할 수 있습니다

대신 file 방식을 시도 할 수 있습니다. 캡쳐 화면에서 http을 사용하고 있기 때문에 보안상의 이유로 작동하지 않습니다.

url('images/bg-image.png'); 

주 슬래시 / 대신 뒤로 한 \의 사용 :

그런 다음, 최선의 선택은 http와 file으로 모두 작동 상대 URL이 될 수 있습니다.

Answer 3

경로 이름 문제입니다. 여기에 코드를 입력하십시오 :

#Header { 
height: 150px; 
width:1020px; 
background-color:gray; 
background-image:url('images/bg-image.png'); 
background-position-x:right; 
font-size:30px; 
font-family:Arial; 
} 

#Footer { 
background-color:gray; 
background-image:url("e:/.../images/footer-image.png"); 
width:1020px; 
height:80px; 
text-align:center; 
font-family:Arial; 
font-size:13px; 
margin-top:5px; 
}