CSS 이미지가 작동하지 않습니다.

Question

웹 사이트를 만들고 백그라운드 이미지를 표시하는 데 여러 가지 방법을 시도했지만 프로젝트를 실행할 때만 Visual Studio에서 볼 수 있습니다.

코드 :

Header 
{ 
    background: url('file:///SomePath.png'); 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 176px; 
    background-color: #AAAAFF; 
    margin-top: 0px; 
    background-size: contain; 
} 

Answer 1

가 그림과 같은 폴더에 이미지인가? 가장 좋은 방법은 같은 폴더에있는 사람들을 테스트하여 작동하는지 확인하는 것입니다. I.E. 그림과 CSS 파일을 같은 폴더에 넣어 머리글이 보이게하십시오.

header { 
background:url('CompetitiveStreakTopBanner.png'); 
background-repeat: no-repeat; 
width: 100%; 
height: 176px; 
background-color: #AAAAFF; 
margin-top: 0px; 
background-size: contain; 
} 

그 같은 포함 된 폴더에서 다른 폴더로 파일을 이동하고이 도움이 background:url('../Elements/CompetitiveStreakTopBanner.png');

희망 같은 것을 사용할 수 있습니다 작동합니다.

Answer 2

몇 가지 가능한 범인

당신은 다른 위치에서 귀하의 사이트를 볼 때 일반적으로 문제로 연결하여 이미지를 가리 키도록 절대 경로를 사용하고

1. .

   이미지를 호출하는 파일과 같은 폴더에있는 경우 나머지 경로없이 간단하게 url(myImage.png)이라고 말하면됩니다. 상대 경로, 즉 사이트의 루트 디렉토리와 관련된 상대 경로를 가리키는 것이 가장 좋습니다. url(../images/myImage.png).

2. 첫 번째 줄에 background-image 대신 background을 지정하여 배경에 shorthand method of writing CSS을 사용하고 있습니다. 속기 CSS에는 특정 순서로 특정 속성 집합이 필요합니다. 이들 중 하나가 유효하지 않거나 부정확 한 경우 나머지는 브라우저에서 유효하지 않은 규칙으로 해석되므로 작동하지 않습니다. Background을 수행 할 수 있습니다

   background: color image repeat position

   예를 들어, background: black url(.../myImage.png) no-repeat top left;

먼저, 그래서 그 변경 시도 : background-image: url(myimage.png);. 또는, 단일 약식 속성으로 CSS 배경 속성을 결합 할 수 있습니다 :

width: 100%; 
height: 176px; 
margin-top: 0px; 
background: #AAAAFF url('file:///SomePath.png') no-repeat top left; 
background-size: contain; 

를 문제가 해결되지 않으면, 위에서 언급 한 바와 같이 상대적으로 파일 경로를 chaning보십시오. URL :

Answer 3

배경 바꾸기 ('파일 : ///SomePath.png을');

배경

: 홈페이지 ('http://www.yoursite/foldercontainingthepicture/picture.png');