Problem related to background image in css django - html

Question

My background image is not shown on the website. The image is in static folder under /projectname/static/img and CSS is under /projectname/static/css/style.css. This is the css:
#showcase {
background: url("../img/showcase.jpg") no-repeat top center fixed/cover;
}
In template under /projectname/template/pagesapp/index.html there is id of element (id= showcase) where i want to apply image. But the image isn't shown. I have checked every thing, collected static and collected static under projectanme/rentalrooms/static,settings.py where. and static root on base (projectname/static)
#showcase {
background: url("../img/showcase.jpg") no-repeat top center fixed/cover;
position: relative;
min-height: 650px;
color: #fff;
padding-top: 6rem; }
#showcase .home-search {
min-height: 400px;
position: relative;
border-radius: 5px; }
#showcase .overlay {
content: '';
position: absolute;
top: 0;
left: 0;
min-height: 400px;
width: 100%;
background: rgba(51, 51, 51, 0.8); }
{% extends 'base.html' %}
{% block title %} | Welcome {% endblock%}
{% load humanize %}
{% block content %}
<!-- Showcase -->
<section id="showcase">
<div class="container text-center">
<div class="home-search p-5">
<div class="overlay p-5">
<h1 class="display-4 mb-4">
Rooms Searching Just Got So Easy
</h1>
<p class="lead">Stop Finding Rooms Manually Its Our Duty To Find Rooms According To Your Preference</p>
<div class="search">
<form action="{% url 'search' %}">
<!-- Form Row 1 -->
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="sr-only">Keywords</label>
<input type="text" name="keywords" class="form-control" placeholder="Keyword (Search By Facility You Want)">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">City</label>
<input type="text" name="city" class="form-control" placeholder="City">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">State</label>
<select name="state" class="form-control">
<option selected="true" disabled="disabled">State (All)</option>
{% for key,value in state_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
<!-- Form Row 2 -->
<div class="form-row">
<div class="col-md-6 mb-3">
<label class="sr-only">Bedrooms</label>
<select name="bedrooms" class="form-control">
<option selected="true" disabled="disabled">Bedrooms (All)</option>
{% for key,value in bedroom_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-3">
<select name="price" class="form-control" id="type">
<option selected="true" disabled="disabled">Max Price (Any)</option>
{% for key,value in price_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
<button class="btn btn-secondary btn-block mt-4" type="submit">Submit form</button>
</form>
<!--
{% ifequal var request.user.username %}
<form action="{% url 'addlisting' %}">
<button class="btn btn-secondary btn-block mt-4" type="submit">Add listing</button>
</form>
{% endifequal%}
-->
</div>
</div>
</div>
</div>
</section>
<br>
<!-- Alert -->
{% include 'partials/_alerts.html' %}
<!-- Listings -->
<section id="listings" class="py-5">
<div class="container">
<h3 class="text-center mb-3">Latest Listings</h3>
<div class="row">
{% if listings %}
{% for listing in listings %}
<!-- Listing 2 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">Rs.{{ listing.price | intcomma }}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i> {{ listing.city }}, {{ listing.state }},
{{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i> Security: {{ listing.security_fee }}</div>
<div class="col-6">
<i class="fas fa-child"></i> For: {% if listing.parking %} <span>Boys</span>{% else %} <span>Girls</span>{% endif %}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i> Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i> Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-user"></i> {{listing.owner }} </div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i> {{listing.list_date | timesince }} </div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p> No Listings Available</p>
</div>
{% endif %}
</div>
</div>
</section>
<section id="services" class="py-5 bg-secondary text-white">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<i class="fas fa-comment fa-4x mr-4"></i>
<hr>
<h3>Consulting Services</h3>
<p>Coming Soon</p>
</div>
<div class="col-md-4">
<i class="fas fa-home fa-4x mr-4"></i>
<hr>
<h3>Blog</h3>
<p>Coming Soon</p>
</div>
<div class="col-md-4">
<i class="fas fa-suitcase fa-4x mr-4"></i>
<hr>
<h3>Disclaimer</h3>
<p>Coming Soon</p>
</div>
</div>
</div>
</section>
{% endblock %}
<!--base.html connection of css link-->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'css/all.css'%}">
<!-- Bootstrap -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css'%}">
<!-- Custom -->
<link rel="stylesheet" href="{% static 'css/style.css'%}">
<!-- Light box -->
<link rel="stylesheet" href="{% static 'css/lightbox.min.css'%}">
<title>RentalRooms {% block title%}{% endblock%}</title>
</head>
<body>
<!-- Top Bar -->
{% include 'partials/_topbar.html' %}
<!-- Nav Bar -->
{% include 'partials/_navbar.html' %}
<!-- Main Content -->
{% block content %} {% endblock %}
<!-- Footer -->
{% include 'partials/_footer.html' %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/lightbox.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>