title: Making body background fit the entire screen
body: <p>This is likely a very easy question but I've tried all of the solutions posted and none of them seem to work for me. </p>
  
  <p>I would simply like the gradient applied to my <code>&lt;body&gt;</code> HTML tag to always fit the screen properly. Whenever I view the browser in a smaller resolution such as this, and try to scroll over, the background appears as such. </p>
  
  <p>Furthermore, if I turn off background-repeat, it just gets filled with white.</p>
  
  <p><a href="https://i.stack.imgur.com/vBbiG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vBbiG.png" alt="Web page error"></a></p>
  
  <p>Here is my base.html:</p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;{% block title %}{% endblock %}&lt;/title&gt;
      &lt;link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/&gt;
      &lt;link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"&gt;
      &lt;link href="{% static 'css/font-awesome.css' %}" rel="stylesheet"&gt;
      &lt;link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet"&gt;
      &lt;link href="{% static 'base.css' %}" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet"&gt;
      {% block head-extras %}{% endblock %}
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-toggleable-md bg-white"&gt;
        &lt;div class="container"&gt;
          &lt;a href="/home" class="navbar-brand"&gt;
            &lt;h1 id="logo" class="nav-wel"&gt;Pomodoro&lt;/h1&gt;
          &lt;/a&gt;
          {% if request.user.is_authenticated %}
            &lt;div class="status"&gt;Balance:&amp;nbsp;{{ request.user.profile.coins }}&lt;img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"&gt;&lt;/div&gt;
            &lt;ul class="navbar-nav"&gt;
              &lt;li class="nav-item dropdown"&gt;
                &lt;a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome"&gt;Welcome {{ user.get_username }}&lt;/a&gt;
                &lt;div class="dropdown-menu"&gt;
                  &lt;a class="dropdown-item" href="/shop"&gt;Shop&lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="/leaderboard"&gt;Leaderboard&lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="/users/change-password"&gt;Change Password&lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="/users/logout"&gt;Logout&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          {% endif %}
        &lt;/div&gt;
      &lt;/nav&gt;
      {% block content %}
      {% endblock %}
      &lt;script src="{% static 'js/jquery-3.2.1.js' %}"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/bootstrap.js' %}"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/pomodoro.js' %}"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>body {
    background: #c2e59c;
    background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
    background: linear-gradient(to right, #c2e59c, #64b3f4);
  }
  </code></pre>