web-dev-qa-db-ja.com

Djangoでcssファイルでbackground-imageを使用する方法

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

cssdjangobackground-image
17
yamachan

これを使って：

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

ほとんどの場合、これは機能します。画像のURLの前に「/ static /」を使用してから試してください。ありがとう

26
Prakhar Trivedi

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'
     }
3
LuKs Sys

いくつかの理由で、受け入れられた答えが私にとってうまくいかなかったと説明することはできません。 （全身の表紙画像として写真を使いたかった）

しかし、ここでは、出くわす人に役立つかもしれない人のために私のために働いた代替案があります。

静的ファイルディレクトリにあるcssファイルで、次のように書きました。

CSS：

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

Cssファイルに*'{% load static %}'*を含める必要はありません。

HTML：

  1. 上部に{%load static%}を含めます

  2. 以下のように、スタイルへのリンクhrefを作成します。

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

1
Simas

これを解決する別の方法を探している人がいる場合、サーバーまたはアクセスできる画像ホスティングサービスから画像をホットリンクすることができます。これは私がこれをどのように解決したかです：

  1. 画像ホスティングサイトまたはサーバーに画像をアップロードします（ドライブ/ Dropboxをお試しください）
  2. 右クリックして新しいタブで画像を開き、画像のURLにアクセスします
  3. （.jpeg、.png）拡張子の付いた画像URLをコピーし、HTMLドキュメントに貼り付けます。

次に例を示します。

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

0
kinGKong