How to have background gradient fill entire page?

I am just recently getting started with learning HTML/CSS, and I'm pretty confused as to how to make this linear gradient I have for the background fit the entire page. I've poked around, and I can't quite seem to find a thread that fits my exact situation.

I currently have it set so that the gradient fills the entire viewport and also scales with the browser window size. However, I am curious to know how to make the gradient not follow me wherever I scroll with the viewport, but have the entire gradient fill the page (past the viewport, not locking with the viewport or following me wherever I scroll).

So, if you were to scroll all the way to the right, for example, you would see what the "rightmost" area of the gradient would be, not simply the entire gradient that I've set (nor a repeating gradient). I'm sorry if I'm not being clear. Thank you for your time.

<head>
    <style>
        html {
            height: auto;
        }

        body {
            background-image: linear-gradient(to bottom right, pink, white);
            height: auto;
            background-attachment: fixed;
            background-size: cover;
        }

        div {
            display: inline-block;
            height: 100px;
            width: 100px;
        }

        .blue {
            background-color: blue;
        }

        .yellow {
            background-color: yellow;
        }

        .red {
            background-color: red;
        }

        .magenta {
            background-color: magenta;
        }

        .sand-brown {
            background-color: rgb(214, 176, 93);
            /*height: 5000px;*/
            width: 5000px;
        }

        .sand-brown2 {
            background-color: rgb(214, 176, 93);
            height: 5000px;
            /*width: 5000px;*/
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="yellow"></div>
    <br>
    <div class="red"></div>
    <div class="magenta"></div>
    <br>
    <div class="sand-brown"></div>
    <div class="sand-brown2"></div>

</body>

</html>

Solution

The issue you are facing here is oveflow. Your element are overflowing the body and the size of the gradient fit the size of the body then it's getting propagated to the root element and repeated. To avoid this you may need to add another container that you make inline-block.

.container {
  background-image: linear-gradient(to bottom right, pink, white);
  display: inline-block;
}

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

div.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

div.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}

<div class="container">
  <div class="blue"></div>
  <div class="yellow"></div>
  <br>
  <div class="red"></div>
  <div class="magenta"></div>
  <br>
  <div class="sand-brown"></div>
  <div class="sand-brown2"></div>
</div>