web-dev-qa-db-ja.com

django）の静的ファイルからのcssスタイルの背景画像

これを使用して テンプレート Djangoプロジェクトでホームページを作成しましたが、背景画像を正しく表示できません（bg.jpg）

背景画像は、cssファイルでfoollowとして使用されます。

.wrapper.style3 {
    background-color: #000;
    color: #bfbfbf;
    background-image: url(/media/usr/path_to_project/project_name/home/static/images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
}

私はこれらのトピックを読みました

そして、すべての解決策を試しましたが、どれもうまくいかないようです。

私のプロジェクトツリーは

project_name
- home
- static
--home
---style.css
--images
---bg.jpg
- templates
-- home
---base.html
---home_template.html

style.cssファイルで私は以下を試しました

background-image: url(/media/usr/path_to_project/project_name/home/static/images/bg.jpg);

background-image: url("/media/usr/path_to_project/project_name/home/static/images/bg.jpg");

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

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

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

私のbase.htmlテンプレートに私は持っています：

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

そして私のhome_template.htmlに私は持っています

{% block body %}
{% load staticfiles %}

        <section id="two" class="wrapper style3">
            <div class="inner">
                <header class="align-center">
                    <p>Nam vel ante sit amet libero scelerisque facilisis eleifend vitae urna</p>
                    <h2>Morbi maximus justo</h2>
                </header>
            </div>
        </section>

{% endblock %}

奇妙なことに、static/imagesディレクトリに、次のようなインラインスタイルでテンプレートに正常に表示される他の画像があります。

<div class="image fit">
<img src="{% static 'images/pic03.jpg' %}" alt="" />
</div>
cssdjangoimagedjango-staticfiles
6
Boidot

Djangoは_/static_を正しいフォルダーに自動的にマップするため、単にbackground-image: url('/static/images/bg.jpg');を使用する必要があります。

8
Jorjon

静的ファイルの提供方法を​​処理する特別な設定があります： STATIC_URL 。

これが正しいパスです。

2
marcanuy