Django css isn't working

Question

I have added some bootsstrap to my django template and that works fine - but yet when I add my own css and it doesn't have an effect on the page; no errors are produced. I have a personal web app with a dir static/personal/images/bg01.png

The image isn't loading and the ul isn't being put inline.

views.py:

def index(request):
    return render(request, 'personal/home.html')

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Deps</title>
    <meta charset="utf-8" />
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">

    <style type="text/css">
        html,
        body {
          height:100%
        }
        background-image:url('{{ STATIC_URL }} personal/images/bg01.png');
        li{
            display:inline;
        }

    </style>
</head>

<body class="body" style="background-color:#f6f6f6">
    <div class="container-fluid" style="min-height:95%; ">
        <div class="row">
              <div class="col-sm-2">
                  <br>
                  <center>
                    <img src="{% static 'personal/images/bg01.png' %}" class="responsive-img" style='max-height:100px;' alt="face">
                  </center>
              </div>
              <div class="col-sm-10">
                  <br>
                  <center>
                  <h3>Programming, Teaching, Entrepreneurship</h3>
                  </center>
              </div>
        </div><hr>

        <div class="row">
          <div class="col-sm-2">
          <br>

          <br>
           <!-- Great, til you resize. -->
            <!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
            <div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
              <ul class="nav nav-pills nav-stacked">
                  <li><a href='/'>Home</a></li> 
                <li><a href='/blog/'>Blog</a></li>
                <li><a href='/contact/'>Contact</a></li>
              </ul>
            </div> <!--well bs-sidebar affix-->
          </div> <!--col-sm-2-->
          <div class="col-sm-10">

            <div class='container-fluid'>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            <br><br>
               {% block content %}
               {% endblock %}   
            </div>
          </div>
        </div> 
    </div>
    <footer>
        <div class="container-fluid" style='margin-left:15px'>
            <p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
        </div>
    </footer>   

</body>

</html>

Have you already reloaded your browser? Browsers will chache static files (css, javascript, html) You can force a hard reload with command + shift + r on mac, which will cause it to recache static files — Richard Stoeffel, Jan 29 '18 at 22:30
@RichardStoeffel Yes. This has been an ongoing problem which I have tried to solve and since have restarted my computer many times — NoisyB, Jan 29 '18 at 22:32
Can you include your view function as well? do you define the STATIC_URL that you use in the style when rendering your view? (i.e. return render(home.html, context={"STATIC_URL": {static url}) That notation in django will tell the html to look for the variable STATIC_URL in the page context — Richard Stoeffel, Jan 29 '18 at 22:37
@RichardStoeffel that makes sense. ive updated it with my code from views.py - what is it exactly i need to add in — NoisyB, Jan 29 '18 at 22:59
So you are using two different variables to refer to your static files right now, {% static 'personal/images/bg01.jpg' %} is a syntax that automatically points to your static root (which you set in the settings already). the {{ STATIC_URL }} syntax implies that in the render function, there is a context variable called STATIC_URL, which would look like this in your view: return render(request, 'personal/home.html', context={'STATIC_URL':{your path here}). You can try setting that STATIC_URL variable to the path of your static directory — Richard Stoeffel, Jan 31 '18 at 15:55
@RichardStoeffel if I was to do it the first way how would I do it. Because it's not displaying when I refer to it using {% 'personal/images/bg01.png' %}. I've checked the settings and it's referring to the static path so I'm unsure why the image won't load — NoisyB, Feb 01 '18 at 20:59
if you use that syntax you need to include the static keyword, so it would be {% static 'personal/images/bg01.png' %} — Richard Stoeffel, Feb 01 '18 at 21:46
@RichardStoeffel I've added that and its still not displaying. in the terminal its responding with: "GET /static/home/images/bg01.png HTTP/1.1" 404 1673, so I presume its found the image, but still the background isn't changing. — NoisyB, Feb 02 '18 at 11:25
If its getting a 404 that actually means it isn't finding the image, 404 is "Not Found", so if there are no typos in the directories and image name, the path django is trying to use is probably wrong. Check out this question https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css, which shows how to use relative paths to use the different directories in a project — Richard Stoeffel, Feb 02 '18 at 15:17
@RichardStoeffel Thanks a lot. It turns out I just had to get rid of the .png — NoisyB, Feb 04 '18 at 16:40

score 4 · Accepted Answer · answered Jan 29 '18 at 22:35

In your style block, the background-image property isn't nested within a selector. If you wanted that to also be applied to the html/body, just move it up into the curly braces (and add a semi-colon after the height property); otherwise, add an appropriate selector to apply the property to instead.

You may also need to remove the space after {{ STATIC_URL }} so you don't end up with a space in the image path.

<style type="text/css">
    html,
    body {
      height:100%;
      background-image:url('{{ STATIC_URL }}personal/images/bg01.png');

    }
    li {
        display:inline;
    }
</style>

It's now displaying inline but the image isn't displaying. Someone commented about linking the static file in views but I'm not too sure what is meant by that — NoisyB, Jan 30 '18 at 21:50

Django css isn't working

1 Answers1