How to make a linear-gradient CSS background to fill the whole background without cutting off at the bottom?

Question

I'm new to HTML/CSS and working from scratch on a website. I'm using some kind of template for the background I found that has different gradients on the background depending on what time of a day you visit the site. I like it so I'm sticking with it for now until I find something better. The only problem is the gradient doesn't fill the screen and cuts off at the bottom. Can someone check out this code and help fix it?

Here's my site: http://OmnipointStudios.com

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Omnipoint Studios</title>
  <meta name="description" content=""/>
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/gradients.css" rel="stylesheet">
</head>
  <body class="">
    <div class="wrapper">
    <header>
      <nav class="website-nav">
        <ul>
          <li><a class="home-link" href="index.html">Omnipoint Studios</a></li>
          <li><a href="research.html">Research</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="text" align="center">
      <a class="twitter-link" href="https://twitter.com/Omnipoint"><img src="img/tweet.svg" /></a>
      <div class="text">
        <h2>Omnipoint on Twitter</h2>
        </div>

    </div>
    <br>
    <br>
        <div class="text" align="center">
        <iframe width="35%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/808499157&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>

        <div class="text" align="center">
        <iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/639444903&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
        </div>

        <div class="text" align="center">
        <iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/287224418&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>
        </div>


            <a align="center" href="https://www.soundcloud.com/omnipointmusic"><h2>Music by Omnipoint</h2></a>
        </div> 

    </div>

    <footer>
      <div align='center'><a href='http://www.hit-counts.com'><img src='http://www.hit-counts.com/counter.php?t=MTQyNDM2NQ==' border='0' alt='Hit Counter'></div>
  </footer>
  </div>

  <script src="js/set-background.js"></script>
</body>
</html>

Gradient.css

   /* Gradients */
.heaven-0 { background: #00000A; }

.heaven-1 { background: linear-gradient(to bottom, #020214 85%,#191922 100%); }

.heaven-2 { background: linear-gradient(to bottom, #020214 60%,#20202D 100%); }

.heaven-3 { background: linear-gradient(to bottom, #020214 10%,#303054 100%); }

.heaven-4 { background: linear-gradient(to bottom, #20202D 0%,#505070 100%); 
}

.heaven-5 { background: linear-gradient(to bottom, #404050 0%,#7070AA 80%,#8C78AA 100%); 
}

.heaven-6 { background: linear-gradient(to bottom, #4A4A69 0%,#7878B4 50%,#C878A0 100%); 
}

.heaven-7 { background: linear-gradient(to bottom, #7878BE 0%,#8282BE 60%,#E6B4D2 100%); 
}


.heaven-8 { background: linear-gradient(to bottom, #82AADC 0%,#F0B4B4 100%); 
}

.heaven-9 { background: linear-gradient(to bottom, #96C8FA 1%,#AAE6FF 70%,#B4B4F0 100%); 
}

.heaven-10 { background: linear-gradient(to bottom, #B4E6FF 0%,#96DCFF 100%); }

.heaven-11 { background: linear-gradient(to bottom, #9BDCFF 0%,#64D2FA 100%); }

.heaven-12 { background: linear-gradient(to bottom, #96DCFF 0%,#37A0D2 100%); }

.heaven-13 { background: linear-gradient(to bottom, #5ABEE6 0%,#236EAA 100%); }

.heaven-14 { background: linear-gradient(to bottom, #2D91BE 0%,#1E508C 100%); }

.heaven-15 { background: linear-gradient(to bottom, #2473ab 0%,#1E508C 70%,#5A7882 100%); 
}

.heaven-16 { background: linear-gradient(to bottom, #1E508C 0%,#285A8C 50%,#A0AA6E 100%); 
}

.heaven-17 { background: linear-gradient(to bottom, #1E508C 0%,#738C7D 50%,#EBD25A 100%); 
}

.heaven-18 { background: linear-gradient(to bottom, #143C78 0%,#5A6E73 30%,#E1C85A 70%,#B4643C 100%); 
}

.heaven-19 { background: linear-gradient(to bottom, #143C50 0%,#505046 30%,#C8782D 60%,#BC460F 80%, #320F05 100%); 
}

.heaven-20 { background: linear-gradient(to bottom, #051928 0%,#051928 30%,#8C3C14 80%,#230F05 100%); 
}

.heaven-21 { background: linear-gradient(to bottom, #000A0F 30%,#5A230A 80%,#280A05 100%); 
}

.heaven-22 { background: linear-gradient(to bottom, #0A0500 50%,#4B1E05 100%); }

.heaven-23 { background: linear-gradient(to bottom, #00000A 80%,#140A00 100%); }

.heaven-24 { background: #00000A; 
}

Styles.css

 * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  html {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 62.5%;
    color: white;
    background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%);
  }
  body {
    font-size: 1.8rem;
  }
  h1, h2, h3 {
    font-weight: normal;
  }
  h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
  }
  a {
    color: white;
    text-decoration: none;
  }
  .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -7rem;
    position: relative;
  }
  footer, .push {
    height: 7rem;
  }

  footer .footer-contents {
    padding: 0 5rem;
    position: relative;
  }

  .website-nav {
    position: relative;
    padding: 5rem;
  }

  .website-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .website-nav ul li {
    float: left;
    padding: 0.5rem 2rem 0.5rem 0;
    line-height: 21px;
  }

  .website-nav ul li a {
    color: white;
    text-decoration: none;
  }

  .home-link {
    font-weight: bold;
  }

  .message {
    position: relative;
    padding: 0 5rem;
    margin-bottom: 3rem;
    width: auto;
  }
  .message .twitter-link {
    float: left;
    margin-right: 20px;
  }

  .message .twitter-link img {
    width: 40px;
    height: 40px;
  }

  .message .text {
    float: left;
  }

  .message:after, .website-nav:after {
    content: " ";
    display: table;
    clear: both;
  }
  .graphics {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
  }
  .graphics .tower svg {
    width: calc(100vw);
    height: calc(90vh);
  }

  .graphics .cloud {
    top: 30rem;
    position: relative;

  }
  .page-content {
    padding: 1rem 5rem;
  }

  .page-content p {
    margin-bottom: 1rem;
  }

  .path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: dash 5s linear forwards;
  }
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

  @media (min-height: 500px) and (min-width: 700px) {
    .message {
      padding: 0;
      width: 50%;
      left: calc(50vw - 5rem);
      top: calc(15vh - 5rem);
    }
    .message .text {
      padding-right: 0rem;
    }
    .graphics {
      display: block;
      margin-bottom: 6rem;
    }
    .message .twitter-link img {
      width: 70%;
      height: 70%;
    }
    .page-content {
      padding: 3rem 5rem;
    }
  }

  @media (min-height: 500px) and (min-width: 1240px) {
    .message {
      left: calc(50vw - 10rem);
      top: calc(25vh - 5rem);
    }
    h1 {
      font-size: 5rem;
    }
    .message .twitter-link img {
      width: 80%;
      height: 80%;
    }
  }

  @media (min-aspect-ratio: 11/5)  {
    .graphics {
      display: none;
    }
  }

remove the height:100 you are applying to body,html – Temani Afif Jun 20 '19 at 23:02 — Temani Afif, Jun 20 '19 at 23:02

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

The linear gradient is fitting the height of the viewport window, not the height of the page.

this is because body {height:100%; } please read this related question.

To fix this:

body {
    height: auto; /* or delete this line entirely */
    min-height: 100%;
}

So replace "100%" height with "auto" (to overwrite other set CSS styles) or delete the height: line entirely from all "body" CSS elements, so:

Then you will need to add the min-height property so that the smallest the body can be is the same height as the viewport window.

Example 1; Your current setup

.heaven-23 {
    background: linear-gradient(to bottom, #08700A 80%,#140A00 100%);
}
body {
    font-size: 1.8rem;
    height: 100%;
}
html,body {  
    height: 100%;
}

<body class='heaven-23'>
<h1>some text</h1>
<h2>and<br>page contents</h2>
<p><BR>Colour edited to highlight changed setting....See that now the background colour extends beyond the page viewport size <BR><BR><BR><BR></p>
</body>

Example 2; Fixed version

.heaven-23 {
    background: linear-gradient(to bottom, #08700A 80%,#140A00 100%);
}
body {
    font-size: 1.8rem;
    height: auto;
    min-height: 100%;
}
html,body {  /** << remove the body tag from here **/
    height: auto; 
    min-height: 100%;
}

<body class='heaven-23'>
<h1>some text</h1>
<h2>and<br>page contents</h2>
<p><BR>Colour edited to highlight changed setting....See that now the background colour extends beyond the page viewport size <BR><BR><BR><BR></p>
</body>

Useful answer, was able to get it fixed and learned a bit in the process. Thank you — Ryan Stark, Jun 21 '19 at 00:51
@RyanStark glad to help. If my answer is useful please +1 (click the up arrow next to it). If my answer helped you solve your query please click the tick icon next to it, cheers `:-)` — Martin, Jun 21 '19 at 08:55

score 0 · Answer 2 · answered Jun 20 '19 at 23:07

0

Remove the height:100% from the html element(you can remove the one for body as it isn't needed either).

Also, remove the margin-bottom attached to the html element. (not present in the css you've posted here, but it's present on your website)

answered Jun 20 '19 at 23:07

CptKicks

441
3
15

How to make a linear-gradient CSS background to fill the whole background without cutting off at the bottom?

2 Answers2

Example 1; Your current setup

Example 2; Fixed version