wake-up-neo.com

Wie man Hintergrundbilder in CSS-Dateien mit Django verwendet

Ich möchte eine Bilddatei als Hintergrundbild für Django verwenden. Aber ich weiß nicht wie . Zuerst habe ich this gelesen und versucht folgendes in eine css-Datei zu schreiben.

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

Das funktioniert aber nicht.

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

und

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

arbeite auch nicht 

Wie schreiben Sie normalerweise eine CSS-Datei, wenn Sie ein Hintergrundbild für CSS-Dateien verwenden? Könnten Sie mir bitte ein paar Ratschläge geben?

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

Benutze das:

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

Wahrscheinlich wird dies funktionieren. Verwenden Sie "/ static /" vor der Image-URL und probieren Sie sie aus. Vielen Dank

18
Prakhar Trivedi

Stellen Sie sicher, dass Django.contrib.staticfiles in Ihrem INSTALLED_APPS enthalten ist.

In Ihrer Datei settings.py definieren Sie STATIC_URL: STATIC_URL = '/static/'

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

oder

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

Für den Fall, dass jemand nach einer anderen Lösung sucht, können Sie das Image von Ihrem Server oder einem anderen Image-Hosting-Dienst, auf den Sie Zugriff haben, per Hot-Link verknüpfen. So habe ich das gelöst:

  1. Laden Sie das Image auf eine Image-Hosting-Site oder Ihren Server hoch (versuchen Sie Drive/Dropbox).
  2. Klicken Sie mit der rechten Maustaste und öffnen Sie das Bild auf einer neuen Registerkarte, um auf die Bild-URL zuzugreifen
  3. Kopieren Sie die Bild-URL mit der Erweiterung (.jpeg, .png) und fügen Sie sie in Ihr HTML-Dokument ein.

Hier ist ein Beispiel:

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

0
kinGKong

Aus einigen Gründen, die ich nicht erklären kann, ist die akzeptierte Antwort für mich nicht gelungen. (Ich wollte ein Bild als Coverbild für den ganzen Körper verwenden). 

Hier ist jedoch die Alternative, die für mich für jeden funktioniert hat, der für jemanden nützlich sein könnte, der auf ihn stoßen wird. 

In einer CSS-Datei, die sich im statischen Dateiverzeichnis befindet, habe ich Folgendes geschrieben: 

CSS: 

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

Sie müssen *'{% load static %}'* nicht in Ihre CSS-Datei einfügen. 

HTML:

  1. fügen Sie {%load static%} oben ein

  2. erstellen Sie einen Link zum Stil (siehe unten).

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

0
Simas