时间戳

首页 > 解决方案 > 与 css django 中的背景图像相关的问题

html - 与 css django 中的背景图像相关的问题

问题描述

我的背景图片没有显示在网站上。图片位于 /projectname/static/img 下的 static 文件夹中，CSS 位于 /projectname/static/css/style.css 下。这是CSS：

#showcase { 
    background: url("../img/showcase.jpg") no-repeat top center fixed/cover;
}

在 /projectname/template/pagesapp/index.html 下的模板中，有我要应用图像的元素 id（id= 展示）。但是没有显示图像。我检查了所有东西，在 projectanme/rentalrooms/static,settings.py 下收集静态和收集静态。和基础上的静态根（项目名称/静态）

#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>
                        <a href="{% url 'listing' listing.id %}" class="btn btn-primary btn-block">More Info</a>
                      </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>

标签： htmlcssdjangobootstrap-4

解决方案

推荐阅读