Django can load image from static files but not using css

Question

I don't understand why my static files (css and images) are properly loaded in my Django project, it works fine when I load the static file from an html tag but when I want to set a background image through css background: url('images/mypic.png') (I also tried url('../images/mypic.png')) andit doesn't work at all.

The image is loaded in the img tag but not in the divs where I call the css

{% load static staticfiles cms_tags menu_tags sekizai_tags %}
<!doctype html>
<html>
    <head>
        <title>{% block title %}This is my new project home page{% endblock title %}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="{% static 'css/styles.css' %}"/>
        {% render_block "css" %}
    </head>
    <body>
        {% cms_toolbar %}
        <div class="container">
            <header>
                <nav>
                    <div class="nav_logo"></div>
                    <ul class="nav">
                    {% show_menu 0 100 100 100 %}
                    </ul>
                </nav>
            </header>
            <main class="container">
                <img src="{% static 'images/logo_aasev.png' %}" alt="Photo de montagne" />
                <div style="background-image: url('{% static "images/logo_aasev.png" %}')"></div>
                {% block content %}{% endblock content %}
            </main>
            <footer>

            </footer>
        </div>
        {% render_block "js" %}
    </body>
</html>

and my css:

* {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    background-color: #000;
}

nav {
    width: 90%;
    margin: 0 auto;
    padding: 10px 0px;
}

.nav {
    padding-left: 0;
}

.nav li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
.container {
    width: 940px;
    margin: 0 auto
}
.content {
    float: left;
    width: 80%;
}
.sidebar {
    float: left;
    width: 20%;
}

.nav_logo {
   background: white url("../images/logo_aasev.png") no-repeat right bottom;
}

And the project structure is myproject -mysite -static -css styles.css -images logo_aasev.png -templates base.html init.py settings.py urls.py wsgi.py manage.py etc...

Did I miss something in the Django settings? What I find weird is the fact that the static files are loaded properly.

[05/May/2017 01:30:51] "GET /fr/ HTTP/1.1" 200 988 [05/May/2017 01:30:51] "GET /static/css/styles.css HTTP/1.1" 200 514 [05/May/2017 01:30:51] "GET /static/images/logo_aasev.png HTTP/1.1" 304 0 That's what happens when I load the page, nothing wrong actually — onizukaek
– onizukaek, Commented May 4, 2017 at 23:32

onizukaek · Accepted Answer · 2017-05-04 23:54:14Z

0

I dont think its a Django problem. You might just try to set height and width properties on the .nav_logo in your css file and you have to set the background-size as well.

edited May 4, 2017 at 23:54

onizukaek

1,2352 gold badges19 silver badges42 bronze badges

answered May 4, 2017 at 23:43

an0o0nym

1,54618 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

onizukaek Over a year ago

Dammit it is a css issue, you were almost right setting width and height is not enough, you also have to set the background-size as well. Thanks for the hint anyway

Collectives™ on Stack Overflow

Django can load image from static files but not using css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related