添加背景圖片到Django站點的div時遇到問題

我想添加一個背景圖片到Django站點的Bootstrap中的一行div。我的CSS說：添加背景圖片到Django站點的div時遇到問題

.bimage { 

    background-image: url("{% static 'home/images/background.jpg' %}"); 

}

我確認jpg是在正確的文件夾中。其他事情可能是錯的嗎？

來源

2017-08-02 henrich

嘗試擺脫花括號，％，和靜態 – Pratikshya

這是在一個CSS文件或模板頭？ –

如果是在一個css文件中，則使用../../上去目錄，然後到home->images目錄。你不能在css文件中使用django模板標籤。

例如如果你的CSS文件是static/css/style.css和你的形象是static/home/images/background.jpg，那麼你會：

background-image: url("../home/images/background.jpg");

如果你的CSS是不是在一個CSS文件，而在你的模板的頭，然後確保您已在settings.py文件中正確設置STATIC_URL和STATICFILES_DIRS。

如果這不是問題，那麼確保你已經在你的模板中加載了靜態的{% load static %}。

如果這不是問題，請嘗試python manage.py collectstatic。

最後但並非最不重要的一點，請確保您指向正確的目錄。

來源

2017-08-02 00:50:17

明白了。感謝這些提示！ – henrich

您的div是否有寬度和高度？然後確保你的背景圖像不是太大。如果是，只會顯示其中的一部分。

.bimage { 
    height: 100%; 
    width: 100%; 
    background: url("{% static 'home/images/background.jpg' %}") no-repeat center center; 
    background-size: 100%; 
}

您可能需要調整這些值以適合您的設計。確保你的iamge正在被加載。您的瀏覽器控制檯中是否顯示404錯誤？

來源

2017-08-02 00:21:23

我沒有得到404錯誤 - 除非我刪除了curley括號，％s和static。該div沒有寬度或高度。我也嘗試過背景和背景圖片，但都沒有工作 – henrich

使用瀏覽器檢查代碼。如果沒有內容被添加，div通常沒有高度和寬度。要使背景圖像可見，請設置寬度和高度。另外，檢查CSS中的輸出鏈接是否會導致所需的圖像。 –

添加背景圖片到Django站點的div時遇到問題

回答

相關問題