发表新帖
发表新帖

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

前端 未结
关注
10 1902
离开以前
离开以前 2021-02-05 02:12

I\'d like to use an image file as a background-image on Django. But I do not know how. First, I read this and tried to write like following this in a css file.

相关标签:
10条回答
  • 不知归路
    2021-02-05 02:55

    Here is the structure of directories for my project so you can be in context of why i'm using the URL's i am using and so you can adapt it to your project. Root directory is the folder than contains the project and apps. I have 4 apps (contacto, galeria, inicio, mapa) and the "WebCalistenia" which is the folder generated when you create a project. There i have static folder with a child called as the father ("WebCalistenia") which has two childs "/css" and "/img"

    enter image description here

    This is what worked for me. Firstly you have to {% load static %} on your HTML.

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

    Now you'll link the CSS to HTML

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

    Finally on the css file you will write:

    background: url("../img/image_name.jpeg");
    0 讨论(0)
  • 暖寄归人
    2021-02-05 02:58

    base.html in body tag

        <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;   
}

    problem slove

    0 讨论(0)
  • 无人共我
    2021-02-05 02:58 
    background-image: url('../img/4799045.jpg');

    best way I think

    0 讨论(0)
  • 再見小時候
    2021-02-05 03:01

    Use this:

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

    Most probably This will work.Use "/static/" before your image URL and then try them. Thanks

    0 讨论(0)
  • 南笙
    2021-02-05 03:02

    In case there's anyone looking for another way to solve this, you may want to hot-link the image from your server or any image hosting service you have access to. Here's how I solved this:

    1. Upload the image in an image hosting site or your server (try Drive/Dropbox)
    2. Right click and open the image in a new tab to access the image URL
    3. Copy the image URL with the (.jpeg, .png) extension and paste in your HTML doc.

    Here's an example:

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

    0 讨论(0)
  • 夕颜
    2021-02-05 03:02

    hello I had some problems I used pycharmS as tool this how I managed to solve the problem obviously you have to load static in your html file and setup your settings.py for

    if all have be done well but the issue is on css file your image is in folder called img which is under static folder YOU HAVE TO DO LIKE THIS : background: Url("../img/myimage.jpeg"); this is the part of your image don't put all settings code of the background on the same line

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

    YOU USE BROWSER LIKE CHROME TO OPEN YOUR PROJECT I USED MICROSOFT EDGE NO CHANGE ON MY PROJECT HAS BEEN APPLIED SIMULTANEOUS

    0 讨论(0)
 看不清?
提交回复
热议问题