Django - CSS file not working. Getting error 404 . "Failed to load resource: the server responded with a status of 404 (Not Found)"

Question

I know this question has been asked many times and I have seen all the answers given, but none of them worked for me. I am a newbie and trying to get access to CSS files in my Django template but it is not working, I have tried many options but none of them worked for me. Here I am using Django 2.2 in my project. Can you please help me to find out the mistake?

settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'

MEDIA_URL = '/images/'

STAICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

urls.py

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

urlpatterns = []

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('GalaxyOffset.urls')),
]

basic.css

body{
    background: url('{% static "../images/photo1.jpg" %}') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moj-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #f5fbff;
    }

basic.html

<!doctype html>
<html lang="en">
<head>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static '/css/basic.css' %}">
    <title>{% block title%} {% endblock %} | Galaxy Offset</title>
</head>
<body>
<div class="container">
    <h1>Welcome to the first page </h1>
    {% block body %} {% endblock %}
</div>
</body>
</html>

project hierarchy This is my Project hierarchy

Here I want to access my CSS file but I couldn't. Can you please help me to figure out what am I doing wrong or missing here?

url('{% static "../images/photo1.jpg" %}') You cannot use {%static in css file. Remove them, just use ../images/photo1.jpg don’t forget clear browser history — ha-neul
– ha-neul, Commented Dec 18, 2020 at 14:20
this isn't working yet after changes. I have removed the background attribute and still, it is not working for the background-color attribute. — Chauhan Mukesh
– Chauhan Mukesh, Commented Dec 18, 2020 at 14:29
Also there is no background-size attribute. Are you trying to say background-repeat? — ha-neul
– ha-neul, Commented Dec 18, 2020 at 14:36

SSL · Accepted Answer · 2020-12-18 17:20:46Z

1

Your code redefines the urlpatterns after adding the static routes. Your urlpatterns in urls.py must be in this order:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('GalaxyOffset.urls')),
]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

And basic.css:

body{
background: url('{% static "images/photo1.jpg" %}') no-repeat center center fixed;
-webkit-background-size: cover;
-moj-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #f5fbff;
}

answered Dec 18, 2020 at 17:20

SSL

561 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Django - CSS file not working. Getting error 404 . "Failed to load resource: the server responded with a status of 404 (Not Found)"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related