The background wont go to the whole page

I just want the backgruond gradient to cover the whole page, I'm unsure to why it only covers the text, Heres my html:

body{
  background-image: linear-gradient(to  bottom left,#2600ff  , #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Loops</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <H1> Fathom converter</h1>
      <input type="textbox" id="number">
      <input type="button" value="Feet" onclick="feets()">
      <input type="button" value="Inches" onclick="inches()">
      <input type="button" value="Centimeters" onclick="centimeters()">
      <input type="button" value="Meters" onclick="meter()">
      <input type="button" value="Yards" onclick="yardes()">
      <br>
     <p id="output">
 </body>
</html>

I have tried maxing out the height and width, using cover, etc. If I dont use no repeat, it repeats the gradient in the same ratio that is in when it starts. If anyone know's how to fix this or why its happening please let me know.

Solution

I would try using the viewport height (vh) and %. Making a div stretch the way you want can sometimes require the use of height and min-height (or width and min-width) working together.

HTML

<body>
  <h1> Fathom converter</h1>
  <input type="textbox" id="number">
  <input type="button" value="Feet" onclick="feets()">
  <input type="button" value="Inches" onclick="inches()">
  <input type="button" value="Centimeters" onclick="centimeters()">
  <input type="button" value="Meters" onclick="meter()">
  <input type="button" value="Yards" onclick="yardes()">
  <br />
  <p id="output">
</body>

CSS

/* This global styling prevented an unwanted scroll bar. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to bottom left, #2600ff, #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
  
  padding: 2rem;
}

Here's a CodePen