CSS背景圖片無法加載

我想將圖片加載到我的頁面並將其設置爲我的背景，下面是我正在使用的CSS和HTML。該CSS頁面似乎加載，因爲我的測試字體和背景顏色顯示，但無論出於什麼原因，我的背景圖像沒有。CSS背景圖片無法加載

我使用Django作爲我的web框架。

感謝幫助！

HTML：

<!DOCTYPE html> 
{% load staticfiles %} 
<html lang="en"> 

<head> 
    <title>Test</title> 
    <meta charset="utf-8" /> 

<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/> 
</head> 

<body> 


<p>This is a test</p> 


</body> 
</html>

CSS：

body 
{ 
background-image:url(personal/static/personal/img/home.jpg) no-repeat; 
background-repeat:no-repeat; 
background-size:100%; 
background-color: green; 
min-height: 100%; 
} 


p { 
    font-style: italic; 
    color: red; 

}

來源

2017-02-08 Phum

從背景圖像中刪除'no-repeat'，因爲您已經將它放在單獨的屬性'background-repeat'中，並查看它是否有效。 –

您使用background-image，所以no-repeat實際上沒有工作。嘗試添加下面的no-repeat作爲background-repeat: no-repeat;。

background-image: url('image-url-here.png'); 
background-repeat: no-repeat;

來源

2017-02-08 09:54:03 monsteronfire

那，或'background：url（'image-url-here.png'）no-repeat;'。但他必須選擇具有'背景'速記的組合屬性或全名分割屬性。不能混合。 – spectras

如你所願，只要在項目中保持一致，兩種方式都有意義。 – spectras

當它，仍然不工作... – Phum

我遇到過類似django的問題，主要是因爲我的{％static％}位置令我困惑。我認爲這是一個非CSS問題，是一個路徑問題。

它幫助我使用開發控制檯來檢查資源無法加載錯誤。它會吐出機器正在尋找的路徑，並且可能與您指定的路徑不同。

I.e.是你的css文件沿

personal/static/personal/img/home.jpg

相對於你的CSS文件？你可能只是需要備份的目錄，即

../personal/static/personal/img/home.jpg

無論哪種方式，控制檯應該給你你的路，並用它來確定您的CSS文件被挖的圖像。

來源

2017-02-09 02:51:04 rob

CSS背景圖片無法加載

回答

相關問題