On Google Chrome, there seems to be a repeating background image issue at the bottom of the page that does not occur in Safari.
Here is how it appears in Safari, which is how I want it to look: https://i.sstatic.net/gDYNp.png
And here is how it looks on Chrome: https://i.sstatic.net/wZhO2.png
This is the CSS code being used for the image:
<!-- Used to extend the base html to this html page -->
{% extends "updates/base.html" %}
{% load static %}
<!-- This is to load tags determine if user is a moderator, superuser, or if user's group == update.game -->
{% load users_tags %}
<!-- Put your CSS files here -->
{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'updates/css/title_updates.css' %}">
<style>
body {
background: url("{{ game.cover_display.url }}") no-repeat 0 3.5rem;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
</style>
{% endblock styles %}
<!-- Actual Content for the homepage goes here -->
{% block content %}
<!-- Game Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-mygrey position">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-light" href="#">Updates</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Bugs</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Petitions</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-primary" href="#">
<i class="fab fa-twitter fa-lg"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">
<i class="fab fa-reddit-alien fa-lg"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- End of Game Navbar -->
<div class="bg-mygrey mb-5">
<div class="row mt-1 pl-3 pr-3 pt-3 pb-3">
<div class="col-md-3 text-center">
<img class="img-fluid" src="{{ game.cover.url }}" alt="{{ game.title }} Cover Image">
</div>
<div class="col-md-9">
<p class="text-light text-break">{{ game.description }}</p>
<button class="btn btn-myblue dropdown-toggle" type="button" id="platform"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select platform
</button>
<div class="dropdown-menu" id="plat-form-options">
{% for platform in game.platform.all %}
<a class="dropdown-item"
onclick="platFormSelect('{% url 'title-updates-ajax' slug=game.slug platform_id=platform.id %}', '{{ platform }}')">{{ platform }}</a>
{% endfor %}
</div>
{% if user.is_authenticated %}
{% if subscription_status %}
<a href="{% url 'unsubscription' slug=game.slug %}" id="subscription"
class="btn btn-myblue">
Unsubscribe
</a>
{% else %}
<a href="{% url 'subscription' slug=game.slug %}" id="subscription" class="btn btn-myblue">
Subscribe
</a>
{% endif %}
{% endif %}
{% if request.user.is_superuser or user|is_group:game.title %}
<a class="btn btn-success" href="{% url 'update-create' %}" aria-label="Create">
<i class="fas fa-plus" aria-hidden="true"></i>
</a>
{% else %}
{% endif %}
</div>
</div>
<div id="updates_data">
</div>
</div>
<script>
$(document).ready(function () {
if ($("#plat-form-options option").length > 0) {
$("#plat-form-options option")[0].click();
}
});
function platFormSelect(url, platform) {
$('#platform').text(platform);
$.get(url, function (response) {
$('#updates_data').html(response);
})
.done(function () {
})
.fail(function () {
});
}
</script>
{% endblock content %}
Edit: The issue may be related to either the navbar or the row below it.
The cutoff of the background image/repeat appears at the bottom of the row.