Django has the ability to display images from static files, however, it is not capable of

I am facing an issue with my Django project where my static files (css and images) load properly when referenced in an html tag, but when I try to set a background image using CSS (background: url('images/mypic.png') or url('../images/mypic.png')), it doesn't work at all.

Interestingly, the image loads when used in an img tag but not when referenced in a div through 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>

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

Project directory structure: myproject -mysite -static -css styles.css -images logo_aasev.png -templates base.html init.py settings.py urls.py wsgi.py manage.py etc...

Could there be a configuration issue in Django settings? It's puzzling that static files load correctly but the background image does not.

Answer №1

It appears that the issue may not be related to Django. One solution could be adjusting the height and width properties for the .nav_logo class in your CSS file, and also ensure that the background-size is correctly set.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

React state update not triggering a component re-render

I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...

Issue found (in promise): Invalid Syntax detected at script.js line 8, character 42

I am in the process of developing a tool that retrieves ROBLOX asset IDs using this particular API. I am utilizing the product info function through an API GET request. Despite being near completion, I keep encountering the error Uncaught (in promise) Synt ...

Placement of Search Bar

After integrating a search bar into my website using code injection points, I am now attempting to relocate it below my site's tagline. The screenshot below illustrates what I am aiming for. You can visit my website at www.jobspark.ca <script typ ...

My div is becoming overly wide due to padding and margin issues

Looking at this div: <!------ CODE SNIPPET ------> <div id="content"> <div class="top"> I am cool<br /> I am cool<br /> I am cool<br /> I am cool<br /> </div> </div> <!------ /CODE SNIPP ...

disabling past dates in Bootstrap calendar

How can I disable past dates in Bootstrap easily? <script type="text/javascript"> $(function(){ $('.datepicker').datepicker(); }); </script> Date: <input type="text" class="datepicker"></input> I have added the ...

Stop a single piece of data from continuously cycling

<?php include ("config.php"); $results = $mysqli->query (" SELECT orders_history.transaction_id, orders_history.items, orders_history.quantity, orders_history.on ...

Struggling to align elements in React/JS/M?

My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

Retrieving the User ID from the window's LocalStorage

I am currently working on a DjangoRestFramework / Vue.js application where I have been using this.requestUser = window.localStorage.getItem("username"); to retrieve the logged user. The main purpose of this was to check if a user was logged in or not. Howe ...

Enhancing Label and Input Elements with Dynamic CSS through jQuery Values

Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Framework I cannot remove it. I'm trying to apply dynamic styling to the input and label elements in my HTML using jQuery. However ...

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

Preventing Double Click Events on jQuery Spinner

I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...

Tips for removing a section of HTML code within a PHP script

I attempted to remove a "Search" button located in the top left corner of a website. While searching for a solution, I stumbled upon a helpful tip at this link: Best way to find out which php file has generated an html line of code in WordPress Even afte ...

The dropdown feature on my theme seems to be malfunctioning on Wordpress

I'm having trouble figuring out what I'm doing wrong. The dropdown navigation works fine with the default Wordpress twentyeleven theme, but when I switch to my custom theme, the dropdown stops appearing. Here is the code I'm using: <div ...

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...

Is there a way to use jquery and ajax to swap out an image on a webpage when a button is clicked?

I am trying to create a button on my HTML page that, when clicked, will asynchronously change a specific image on the page. Here's what I have so far: <a href="/test/page"> button </a> What I want is for the button click to change this i ...

Tips for shifting a div to the left with AngularJS

I am working with a div structure that looks like the following: <div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div> <div class="customer-ust-bant col-xs-22" id="letters"> <box n ...

Prevent a specific image from being impacted by CSS styling

I've implemented the following CSS on my website for image opacity: img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1; filter:alpha(opacity=100); } Now, I am looking to exclude certain images from being affected by this ...