title: Django - CSS file not working. Getting error 404 . "Failed to load resource: the server responded with a status of 404 (Not Found)"
body: <p>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?</p>
  <p><strong>settings.py</strong></p>
  <pre><code># 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')
  </code></pre>
  <p><strong>urls.py</strong></p>
  <pre><code>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')),
  ]
  </code></pre>
  <p><strong>basic.css</strong></p>
  <pre><code>body{
      background: url('{% static &quot;../images/photo1.jpg&quot; %}') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moj-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-color: #f5fbff;
      }
  </code></pre>
  <p><strong>basic.html</strong></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      {% load static %}
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{% static '/css/basic.css' %}&quot;&gt;
      &lt;title&gt;{% block title%} {% endblock %} | Galaxy Offset&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;Welcome to the first page &lt;/h1&gt;
      {% block body %} {% endblock %}
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>project hierarchy</strong>
  <a href="https://i.stack.imgur.com/rf48D.png" rel="nofollow noreferrer">This is my Project hierarchy</a></p>
  <p>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?</p>