title: Jumbotron background image not working. What am I doing wrong?
body: <p>So I'm not sure what I'm doing wrong here. I tried a couple of different things and if I manually pug in my photo through my HTML where Jumbotron is, my pictures do load, although with padding which I don't want AND it's not in the background. I don't understand what I am doing wrong here. I tried two different ways and neither of those works. The only thing that works is doing <code>img src=</code> straight into the Jumbotron section but like I said that's what I want. So what am I doing wrong here?</p>
  
  <p><strong>project urls</strong></p>
  
  <pre><code>    from django.contrib import admin
  from django.urls import path, include
  from django.conf.urls import url
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('', include('dating_app.urls', namespace= 'dating_app')),
  
  
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  </code></pre>
  
  <p><strong>settings.py</strong></p>
  
  <pre><code>  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, "dating_app/static"),
  ]
  </code></pre>
  
  <p><strong>home.html/styles</strong></p>
  
  <pre><code>.JumboHeaderImg{
    background-image: url("/Users/papichulo/Documents/DatingAppCustom/dating_app/static/images/jumbo.jpg");
  
  }
  
  
  
      .JumboHeaderImg{
    background-image: "{% static 'images/jumbo.jpg' %}";
  </code></pre>
  
  <p><strong>home.html/jumbotron</strong></p>
  
  <pre><code> &lt;div class="jumbotron  JumboHeaderImg"&gt;
  </code></pre>
  
  <p><strong>styles.css</strong></p>
  
  <pre><code>.navbar-nav  li{
    padding-left:35px;
    padding-right:10px;
    margin-top: -20px;
    margin-bottom: -20px;
  
  }
  
  /* Modify the backgorund color */ 
  .navbar-custom { 
      background-color: #ffffff; 
  } 
  
  
  .jumbotron{
      background-color: #f76062228c;
  }
  .navbar .nav-item{
      color: red;
  }
  
  
  
  .notification {
  
  
  
    text-decoration: none;
    padding:50;
    position: relative;
    display: inline-block;
  
  }
  
  
  
  .notification .badge {
    position: absolute;
    top: -15px;
    right: -10px;
    padding: 5px 5px;
    border-radius: 40%;
    background-color: red;
    color: white;
  }
  </code></pre>