使用 Django 在 css 个文件中使用背景图像的方法

Question

我想在 Django 上使用图像文件作为背景图像。但是我不知道怎么做。首先，我阅读了 this 并尝试在 css 文件中像这样写。

#third{
    background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

但这不起作用。

{% load staticfiles %}
#third{
    background: url({% static "img/sample.jpeg" %}) 50% 0 no-repeat fixed;
}

和

#third{
    background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;
}

也不行。

在css文件上使用background-image时，你通常如何编写css文件？你能给我一些建议吗？

C:\~~~~~~> dir hello\static\img
2016/09/28  19:56             2,123 logo.png
2016/09/24  14:53           104,825 sample.jpeg


C:\~~~~~~> dir hello\static\css
2016/09/29  20:27             1,577 site.css


C:\~~~~~~> more lemon\settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)


C:\~~~~~~> more hello\templates\base.html
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/site.css" %}" />

Django 版本：1.9.2

Answer 1

使用这个：

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

很可能这会 work.Use "/static/" 在你的图像之前 URL 然后试试看。谢谢

Answer 2

确保 django.contrib.staticfiles 包含在您的 INSTALLED_APPS 中。

在你的settings.py文件中定义STATIC_URL:STATIC_URL = '/static/'

     {% load static %}
     <img src="{% static "my_app/example.jpg" %}" alt="My image"/>

或

     #third{
          background: url('{{ STATIC_URL }}my_app/example.jpg'
     }

Answer 3

由于某些我无法解释的原因，已接受的答案对我来说并不奏效。（我想用一张图片作为全身的封面图）。

但是，这是对我有用的替代方案，可能对遇到的人有用。

在位于静态文件目录的css文件中，我写了以下内容：

CSS:

body {
  background: url(../main/img/picture-name.jpg); 
}

您不必在 css 文件中包含 *'{% load static %}'*。

HTML:

在顶部包含 {%load static%}
创建一个 link href 样式，如下所示。

<link href='{% static "/main/home.css" %}' rel='stylesheet' type='text/css'>

Answer 4

如果有人正在寻找其他方法来解决此问题，您可能需要 hot-link 来自您的服务器或您有权访问的任何图像托管服务的图像。这是我解决这个问题的方法：

在图像托管站点或您的服务器中上传图像（尝试 Drive/Dropbox）
右键单击并在新选项卡中打开图像以访问图像URL
复制带有（.jpeg、.png）扩展名的图像 URL 并粘贴到您的 HTML 文档中。

这是一个例子：

https://images.your-host.com/photos/image-path-here.jpeg

Answer 5

background-image: url('{% static '.jpg' %}');

Answer 6

base.html 正文标签

    <body>

{% load static %}

    </body>

style.css

#third{
    background: url("/static/img/sample.jpeg")  50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

问题解决

Answer 7

你好我遇到了一些问题我使用 pycharmS 作为工具我是如何解决问题的显然你必须在你的 html 文件中加载 static 并为

设置你的 settings.py

如果一切都很好，但问题出在 css 文件上您的图像位于静态文件夹下名为 img 的文件夹中你必须这样做：背景：Url("../img/myimage.jpeg")；这是你的形象的一部分后台所有设置代码不要放在同一行

background-repeat: no-repeat;

背景附件：已修复；

背景位置：居中；

您使用类似 CHROME 的浏览器来打开您的项目我使用的是 MICROSOFT EDGE 我的项目未同时应用任何更改

Answer 8

background-image: url('../img/4799045.jpg');

我认为最好的方式

Answer 9

这是我的项目的目录结构，因此您可以了解我为什么使用我正在使用的 URL，因此您可以根据您的项目调整它。根目录是包含项目和应用程序的文件夹。我有 4 个应用程序（contacto、galeria、inicio、mapa）和“WebCalistenia”，这是您创建项目时生成的文件夹。我有一个名为父亲（“WebCalistenia”）的 child 的静态文件夹，它有两个 childs “/css” 和 “/img”

enter image description here

这对我有用。首先，您必须在 HTML.

上 {% load static %}

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
...

现在您将 link 从 CSS 到 HTML

    <link rel="stylesheet" href="{% static 'app_name/css/document.css' %}">

最后在 css 文件中，您将写入：

background: url("../img/image_name.jpeg");

Answer 10

虽然这里列出的解决方案是正确的，但我只想添加一个你需要清除浏览器缓存的东西(Ctrl + F5) 在更新你的 CSS 之后。参考这个link.

Answer 11

我遇到了同样的问题。只需确保您的图像位于 CSS 目录中。因为由于您使用 {% load static %} 将 CSS 文件加载到 HTML 中，这意味着每次 CSS 文件都会在该目录中搜索图像（我将我的图像放在在“我的 CSS 文件所在的静态目录”之外，这就是为什么它不起作用）。因此，为了简单起见，将您的图像放在静态目录中（您的图像和 CSS 文件位于“静态文件夹”的同一目录中）

Answer 12

我有同样的困惑，我遵循了上面提到的答案，但由于某些原因，引语对我不起作用。这就是模板中对我有用的东西：

{% load static %}

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

Answer 13

只需在路径url

前加上"/static/../img.jpeg"

Answer 14

将撇号放在 Django 链接的开头和结尾，它应该可以工作。

background: url('{% static "img/sample.jpeg" %}') 50% 0 no-repeat fixed;

Answer 15

也许您的 url 路径不正确如果它是正确的，请将您的 .css 文件设为静态，并在运行服务器确保您清除所有缓存的图像和文件后，您可以通过按 Ctrl+Shift+Del 并勾选 'Cached images and files' 来清除缓存。

Answer 16

这是 Django Documentation 的最佳解决方案，但我 post 无论如何都是简单的解决方案：

1- django.contrib.staticfiles应该包含在你的INSTALLED_APPS中

Settings.py

文件。

2-在

末尾添加以下内容

settings.py

如果尚未添加。

STATIC_URL = '/static/'

3- 在 html 文件中使用 static 通过 img[ 加载图像=47=] 标签或 css.

{% load static %} <img src="{% static 'my_app/example.jpg' %}" alt="My image">

或

{% load static %} <style> .bgimg { background-image: url("{% static 'my_app/example.jpg' %}"); } </style>

4-（重要）

在您的 app 目录中创建 static 文件夹，然后在您的静态文件夹中再次使用您的应用名称创建目录，并将您的图像在那里。文件夹如下：

my_app/static/my_app/example.jpg

完成所有这些步骤后，图像应该可以完美显示。

Answer 17

您可以使用 html 样式标签而不是在 .css 文件中添加。

将此添加到您的 HTML

顶部

{% load static %}

在<head>标签中这样添加

<style>
    #third {
        background: url("{{ STATIC_URL }}img/sample.jpeg") 50% 0 no-repeat fixed;
    }
</style>

如果您以后更改静态文件路径，它不会崩溃

Answer 18

设置背景图片URL - 从 2021 年开始更新。

我相信你们中的大多数人都在为自己的样式使用单独的 .css 文件。这里有一个简单的解释：

您需要在 settings.py 文件中设置 STATIC_URL = '/static/' 以告诉 Django 在哪里可以找到您的静态文件。此外，您可能已经知道这一点，因为您走到这一步是为了寻找答案。但是给你：

您需要在模板中包含 {% load static %}。

现在，您想为元素设置背景图片。这是一个示例静态文件夹结构：

static
│
├───css
│   ├───accounts
│   └───homepage
│           top.css
├───img
│       top-image.png
└───js
        dropdown.js

您要从 top.css 文件访问 img/top-image.png 文件。以下是您的所有选择：

   /* The best option because it also works with cloud storage services like AWS*/
   .my-element {
       background-image: url("/static/img/top-image.png");
    }

   /* It works when Django is serving your static files from local server, not recommended for production*/
   .my-element {
       background-image: url("../../img/top-image.png");
    }

其余示例假设您正在编写内联样式或在模板内的 <style> 标记内（而不是在单独的 .css 文件中）

   /* Because it is inside your template, Django can translate `{{STATIC_URL}}`  into a proper static files path*/
   .my-element {
       background-image: url("{{STATIC_URL}}img/top-image.png");
    }

   /* Similarly you can use {% static 'static_path' %} inside your template with no issues*/
   .my-element {
       background-image: url("{% static 'img/top-image.png' %}");
    }

给你 - 从 css.

访问静态文件的多种可能方式

使用 Django 在 css 个文件中使用背景图像的方法

The way to use background-image in css files with Django

css

django

background-image

4-（重要）

my_app/static/my_app/example.jpg

设置背景图片URL - 从 2021 年开始更新。