CODEWITHSUNDEEP
htmlcssdjango
onizukaek
onizukaek

Reputation: 1233

Django can load image from static files but not using css

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.

Upvotes: 0

Views: 915

Answers (1)

an0o0nym
an0o0nym

Reputation: 1516

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.

Upvotes: 0

Related Questions