CODEWITHSUNDEEP
cssdjangodjango-templates
Scott K.
Scott K.

Reputation: 311

Background image not rendering correctly in Django

I am working on a project in Django 2. I have a base.html in templates:

{% block removable-pagetop %}
      <div class="showcase">
        <div class="showcase-content-top">
          {% block page-title %}{% endblock %}
          <p>{% block page-subtitle %}{%endblock %}</p>
        </div>
        {% block button-list %}
        <div class="showcase-content-buttons">
          <ul>
            <li>{% block button1 %}{% endblock %}</li>
            <li>{% block button2 %}{% endblock %}</li>
            <li>{% block button3 %}{% endblock %}</li>
            <li>{% block button4 %}{% endblock %}</li>
          </ul>
        </div>
        {% endblock %}
      </div>
      {% endblock %}

The CSS for a background image is:

.showcase {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/static/img/vg_home.jpeg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

My index.html is:

{% extends 'base.html' %}
{% load static %}

{# Page/Tab Title #}
{% block title %}Video Games | Home{% endblock %}

{# Navbar with video game theme icon #}
{% block navbar %}
<header>
  <nav class="nav-wrapper">
    <div class="logo">
      <a href="{% url 'index' %}">
        {% block nav-icon %}<img src="{% static 'img/vg_icon.png' %}">{% endblock %}
      </a>
    </div>
    <ul class="menu">
      <li><a href="{% block home-button %}{% url 'index' %}{% endblock %}">Home</a></li>
      <li><a href="{% block about-button %}{% url 'about' %}{% endblock %}">About</a></li>
    </ul>
  </nav>
</header>
{% endblock %}

{% block removable-pagetop %}
<div class="showcase">
  <div class="showcase-content-top">
    {% block page-title %}<h1>Vide<span class="text-color">o</span><span id="wave"></span>
      <span id="wave2"></span> Games</h1>{% endblock %}
    <p>{% block page-subtitle %}Play <span class="separator">|</span> Eat
      <span class="separator">|
      </span> Sleep <span class="separator">|</span> Repeat{%endblock %}</p>
  </div>
  {% block button-list %}
  <div class="showcase-content-buttons">
    <ul>
      <li>{% block button1 %}<a href="{% url 'library' %}" class="contact-btn">Library</a>{% endblock %}</li>
      <li>{% block button2 %}<a href="{% url 'search' %}" class="contact-btn">Search</a>{% endblock %}</li>
      <li>{% block button3 %}<a href="{% url 'news' %}" class="contact-btn">News</a>{% endblock %}</li>
      <li>{% block button4 %}<a href="{% url 'about' %}" class="contact-btn">About</a>{% endblock %}</li>
    </ul>
  </div>
  {% endblock %}
</div>
{% endblock %}

{# Optional JavaScript from base.html #}
{%  block javascript %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/masonry.js' %}"></script>
<script src="{% static 'js/slick.min.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>
<script>
  var scene = document.getElementById('scene');
</script>
{%  endblock %}

The image shows up in the view finder i n VS Code, I can even link to it directly from the link I type into the URL value field in the background-image property. Even in Chrome Inspect tool, if I hover over the URL path it shows a little snippet of the correct image. However my screen renders white where the image should be. This started happening when I implemented a fix for my footer not staying at the bottom of the page.

Here's what the page looks like and the HTML of the fix: Website with background image not showing

<body>

  <!-- Navbar -->
  {% include 'partials/_navbar.html' %}

  <!-- Page Top -->
  {% block page-container %}
  <div id="html-container">
    <div id="main">

      {% block removable-pagetop %}
      <div class="showcase">
        <div class="showcase-content-top">
          {% block page-title %}{% endblock %}
          <p>{% block page-subtitle %}{%endblock %}</p>
        </div>
        {% block button-list %}
        <div class="showcase-content-buttons">
          <ul>
            <li>{% block button1 %}{% endblock %}</li>
            <li>{% block button2 %}{% endblock %}</li>
            <li>{% block button3 %}{% endblock %}</li>
            <li>{% block button4 %}{% endblock %}</li>
          </ul>
        </div>
        {% endblock %}
      </div>
      {% endblock %}



      <!-- Page Content -->
      <section class="main_content">
        {% block appcontent %}{% endblock %}
      </section>

    </div>
  </div>
  {% endblock %}
  <!-- Footer -->
  {% include 'partials/_footer.html' %}

  <!-- Optional JavaScript -->
  {%  block javascript %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
  <script src="{% static 'js/scripts.js' %}"></script>
  {%  endblock %}

</body>

I have a container div and a main div that pushes the footer down to the bottom anytime content is added. If I remove these the photo shows, but the footer comes up off the bottom. Even if I set the footer to fixed, bottom 0.

Any help is appreciated. Thanks!

CSS:

* {
  margin: 0;
  padding: 0;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  position: relative;
}

#html-container {
  min-height: 100%;
}

#main {
  overflow: scroll;
  padding-bottom: 81px;
}

/*RESET CSS END*/

.showcase {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
    ),
    url(/static/img/vg_home.jpeg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.showcase-content-top {
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.showcase-content-top h1 {
  margin-bottom: 20px;
  font-size: 50px;
  font-weight: 900;
  text-transform: uppercase;
}

.text-color {
  color: rgb(151, 193, 92);
}

#wave {
  height: 100px;
  width: 100px;
  border: 10px solid silver;
  position: absolute;
  top: 25.6%;
  left: 39.8%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-animation: pulseEffect 4s infinite linear;
  animation: pulseEffect 4s infinite linear;
}

@-webkit-keyframes pulseEffect {
  from {
    transform: translate(-50%, -50%) scale(0.5);
    border: 0px solid silver;
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    border: 10px solid rgb(151, 193, 92);
    opacity: 1;
  }
}

@keyframes pulseEffect {
  from {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.4;
  }
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.showcase-content-buttons > ul {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  padding: 0;
}

.showcase-content-buttons > li {
  width: 120px;
  display: inline-block;
}

.showcase-content-buttons a {
  display: inline;
  color: #fff;
}

.separator {
  color: rgb(151, 193, 92);
}

/* ===========================================
      NAV BAR STYLING  //  START
     =========================================== */
header {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  position: relative;
  height: 75px;
}
header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-200%);
  transition: 0.2s;
  z-index: 5;
}
body.scroll header.sticky {
  transform: translateY(0);
}
.nav-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  height: 75px;
  padding: 1px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul li {
  display: inline-block;
  padding: 0 10px;
  margin-bottom: 0;
  vertical-align: middle;
}

.menu {
  margin-bottom: 0;
}

nav.nav-wrapper ul li a {
  font-size: 20px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: 0.3s;
}
nav.nav-wrapper ul li a:hover {
  border-bottom: 1px solid rgb(151, 193, 92);
}

.logo {
  vertical-align: middle;
}

header .logo img {
  max-width: 50px;
  transition: 0.8s;
}

header .logo img:hover {
  transition: 0.8s;
  transform: scale(1.3);
}
/*Navigation Bar styling  //  END*/

/* ===========================================
       FOOTER STYLES //  START
  =============================================*/
#footer {
  position: relative;
  height: 81px;
  margin-top: -81px;
  background: rgb(25, 25, 25);
  color: white;
  text-align: center;
  clear: both;
}

.footer-content {
  margin: auto;
  width: 100%;
  padding: 5px 0;
}

p.logos {
  margin-bottom: 0;
}

footer h1 {
  font-size: 20px;
  color: white;
  font-weight: bold;
}

footer a {
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}

footer a:hover {
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgb(151, 193, 92);
}
/*FOOTER STYLES END*/

/* ============= RESPONSIVE max-width: 991p =========== */
@media (max-width: 991px) {
}
/* ============= RESPONSIVE max-width: 768px =========== */
@media (max-width: 768px) {
}
/* ============= RESPONSIVE max-width: 385px=========== */
@media (max-width: 385px) {
}

Upvotes: 1

Views: 465

Answers (1)

justinw
justinw

Reputation: 3966

Looking at the markup I can see a couple of issues, but it's hard to debug without seeing the layout live.

1 - I noticed that the footer element is outside of your main container(s) - main and html-container.

2 - You might want to try 100vh on the .showcase element, rather than 100%. The reason for this is that 100vh will take up 100% of the visible viewport, regardless of the height value set on the parent container(s).

Changing to 100vh might provide a quick fix, but I recommend looking at the markup and making sure that the parent elements have their height set properly. height: 100% means an element will take up 100% of the available height, but if the parent does not have height set, the 100% won't do anything.

Upvotes: 1

Related Questions