I am struggling to display a background image in the Django admin site. Despite researching multiple solutions, none of them seem to work for me. All I want is for the background to be visible behind the admin site. I have a file named base_site.html.
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "css/admin-extra.css" %}" />
{%endblock%}
The admin-extra.css file looks like this:
head.bg {
/* The image used */
background-image: url('{{ STATIC_URL }} background.png') ;
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Although the extra-admin.css file is being loaded as confirmed by the Firefox inspector, the image does not appear on the background. It seems like something is there briefly, but it gets covered by the normal admin site with a white background.