web-dev-qa-db-fra.com

Comment utiliser background-image dans des fichiers CSS avec Django

J'aimerais utiliser un fichier image comme image d'arrière-plan sur Django. Mais je ne sais pas comment… .. D'abord, j'ai lu ceci et j'ai essayé d'écrire comme suit dans un fichier CSS.

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

Mais ça ne marche pas.

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

et

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

ne travaille pas aussi. 

Comment écrivez-vous habituellement un fichier css lorsque vous utilisez background-image sur des fichiers css? Voulez-vous s'il vous plaît me donner des conseils?

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 version: 1.9.2

cssdjangobackground-image
12
yamachan

Utilisez ceci:

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

Cela fonctionnera probablement. Utilisez "/ static /" avant votre URL d'image, puis essayez-les. Merci

18
Prakhar Trivedi

Assurez-vous que Django.contrib.staticfiles est inclus dans votre INSTALLED_APPS.

Dans votre fichier settings.py, définissez STATIC_URL: STATIC_URL = '/static/'

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

ou

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

Pour certaines raisons que je ne peux expliquer, la réponse acceptée ne m'a pas aidé. (Je voulais utiliser une image comme image de couverture pour tout le corps). 

Cependant, voici l'alternative qui a fonctionné pour moi et qui pourrait être utile pour quelqu'un que vous rencontrerez. 

Dans un fichier css, situé dans le répertoire de fichiers statiques, j’ai écrit ce qui suit: 

CSS: 

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

Vous n'êtes pas obligé d'inclure *'{% load static %}'* dans votre fichier css. 

HTML:

  1. inclure {%load static%} en haut

  2. créez un lien href to style, comme ci-dessous.

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

0
Simas