Django Static Files Issue with Background Image

The issue is that Django template tags like {% static %} don't work directly in CSS files because CSS files are served as static files themselves and aren't processed by Django's template engine.

Here are a few solutions to fix this problem:

Solution 1: Use inline styles in your HTML template

DJANGOCopied
{% extends 'core/base.html' %}

{% block title %} Inicio {% endblock %}

{% load static %}

{% block content %}
<div class="container">
  <div class="imagen-inicio" style="background: url('{% static 'img/inicio-gb.jpg' %}') 50% 0 no-repeat fixed;">
  </div>
</div>
{% endblock %}

Solution 2: Create a CSS file with Django template tags

Create a CSS template file (e.g., style.css.html or similar) and include it in your HTML with the proper content type:

DJANGOCopied
{% load static %}

<style>
.imagen-inicio {
    background: url('{% static "img/inicio-gb.jpg" %}') 50% 0 no-repeat fixed;
    object-fit: fill;
}
</style>

Then include this in your base template or specific template.

Solution 3: Use absolute paths in your CSS

In your regular CSS file, use the absolute path to your static files:

CSSCopied
.imagen-inicio {
    background: url('/static/img/inicio-gb.jpg') 50% 0 no-repeat fixed;
    object-fit: fill;
}

Note that this approach might not work if you change your STATIC_URL setting.

Additional Tips

1. Make sure your div.imagen-inicio has a defined height, otherwise the background won't be visible:

CSSCopied
.imagen-inicio {
    height: 500px; /* or any other value */
    background: url('/static/img/inicio-gb.jpg') 50% 0 no-repeat fixed;
    object-fit: fill;
}

2. Verify that your static files are properly configured in your Django settings:

PYTHONCopied
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3. Check that the path to your image is correct. The ../ in your path might be causing issues.