CSS image not working

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而不是background-image，您可以使用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的文件路徑相對。

Answer 3

替換

背景：網址（ '文件：///SomePath.png'）;

與

背景：網址（ 'http://www.yoursite/foldercontainingthepicture/picture.png'）;