Блог

Кажется, что фоновое изображение повторяется в Chrome внизу страницы, однако в safari этого не происходит.

Вот как это выглядит в safari и как я хочу, чтобы это выглядело:

И вот как это выглядит в Chrome:

Вот css-код, который я использую для этого изображения:

     <!-- 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 %}
  

Редактировать: Проблема, похоже, исходит либо из панели навигации, либо из строки под ней.

Отсечение фонового изображения / повтора начинается в нижней части строки

Попробуйте использовать сокращение:

 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;
        }