title: Django : Import static file inside a template doesn't work properly
body: <p>It seems that my static file doesn't work properly in my django project. I'm not sure whether this is exactly related to js files or the whole static file. Checking related questions, I couldn't find how to solve this problem. So, I send what my template should look like and how it looks in my browser in the below screenshots:</p>
  <p>what my template should look:(when scrolling down, the background image also moves)</p>
  <p><a href="https://i.stack.imgur.com/0yyxV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0yyxV.png" alt="what my template should look:(when scrolling down, the background image called showcase.jpg also moves)" /></a></p>
  <p>But this is how my browser shows the template: (no background images, no padding adjustments)</p>
  <p><a href="https://i.stack.imgur.com/nY3ZH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nY3ZH.png" alt="this is how my browser shows the template: (no background images, no padding adjustments)" /></a></p>
  <p>This is my base.html codes:</p>
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
      &lt;!-- Font Awesome --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'css/all.css' %}&quot;&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'css/bootstrap.css' %}&quot;&gt;
      &lt;!-- Custom --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'css/style.css' %}&quot;&gt;
      &lt;!-- LightBox --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'css/lightbox.min.css' %}&quot;&gt;
  
      &lt;title&gt;BT Real Estate&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Top Bar --&gt;
      {% include 'partials/_topbar.html' %}
      &lt;!-- Navbar --&gt;
      {% include 'partials/_navbar.html' %}
      &lt;!--- Main Content --&gt;
  
      {% block content %} {% endblock %}
      &lt;!-- Footer --&gt;
      {% include 'partials/_footer.html' %}
  
      &lt;script src=&quot;{% static 'js/jquery-3.3.1.min.js' %}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{% static 'js/bootstrap.bundle.min.js' %} &quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{% static 'js/lightbox.min.js' %} &quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{% static 'js/main.js' %} &quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Also, this is how I addressed my static file in settings.py:</p>
  <pre><code># Application definition
  
  INSTALLED_APPS = [
      'django.contrib.admin',
      'listings.apps.ListingsConfig',
      'realtors.apps.RealtorsConfig',
      'pages.apps.PagesConfig',
      'django.contrib.auth',
      'django.contrib.humanize',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  ROOT_URLCONF = 'btre.urls'
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR, 'templates')],
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  
  WSGI_APPLICATION = 'btre.wsgi.application'
  
  # Database
  # https://docs.djangoproject.com/en/3.0/ref/settings/#databases
  
  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.postgresql',
          'NAME': '******',
          'USER': '******',
          'PASSWORD': '******',
          'HOST': 'localhost',
      }
  }
  
  # Password validation
  # https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
  
  AUTH_PASSWORD_VALIDATORS = [
      {
          'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
      },
  ]
  
  # Internationalization
  # https://docs.djangoproject.com/en/3.0/topics/i18n/
  
  LANGUAGE_CODE = 'en-us'
  
  TIME_ZONE = 'UTC'
  
  USE_I18N = True
  
  USE_L10N = True
  
  USE_TZ = True
  
  # Static files (CSS, JavaScript, Images)
  # https://docs.djangoproject.com/en/3.0/howto/static-files/
  
  STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'btre/static')
  ]
  
  # Media Folder Settings
  MEDIA_ROOT = os.path.join (BASE_DIR, 'media')
  MEDIA_URL ='/media/'
  </code></pre>
  <p>Here is my urls.py codes:</p>
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      path('', include('pages.urls')),
      path('listings/', include('listings.urls')),
      path('admin/', admin.site.urls),
  ] + static (settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
  </code></pre>
  <p>Here is how I extend base.html in index.html: (I just brought the show case's codes here)</p>
  <pre><code>{% extends 'base.html' %}
  {% load humanize %}
  {% block content %}
      &lt;!-- Showcase --&gt;
      &lt;section id=&quot;showcase&quot;&gt;
          &lt;div class=&quot;container text-center&quot;&gt;
          &lt;div class=&quot;home-search p-5&quot;&gt;
              &lt;div class=&quot;overlay p-5&quot;&gt;
              &lt;h1 class=&quot;display-4 mb-4&quot;&gt;
                  Property Searching Just Got So Easy
              &lt;/h1&gt;
              &lt;p class=&quot;lead&quot;&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit.Recusandae quad, 
  asperiores eveniet vel nostrum magnam
                  voluptatum tempore! Consectetur, id commodi!&lt;/p&gt;
              &lt;div class=&quot;search&quot;&gt;
                  &lt;form action=&quot;search.html&quot;&gt;
                  &lt;!-- Form Row 1 --&gt;
                      #pass
  {% endblock %}
  </code></pre>
  <p>And finally, here is the hierarchy of my static file:</p>
  <p><a href="https://i.stack.imgur.com/aX7gZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aX7gZ.png" alt="the hierarchy of my static file" /></a></p>
  <p>Why did such a problem happen? Can somebody help me out with this problem?</p>
  <p>Thank you.</p>