gradient background going down?

I have a gradient background at the top of my html page, i want it to stay at the top so it doesnt go past my navbar. It stayed at the top until i put in an image, the background follow the image and the background stopped at the bottom of the image, i just want it to stay at the top.

P.S i am new to html and css/coding in general

my code:

body {
    font-family: system-ui;
    background-image: linear-gradient(to bottom right, #9710e6, #541a54 );
    background-repeat: no-repeat;
}

i also have a header at the top of the page but its just short of the navbar and idk how to adjust the size

i tried changing the max/min height, i tried changing the background position etc.

Don't put gradient on the body, if you don't want it on the whole body.

Look at and run this code snippet to see an example of putting the gradient on a <header>, where the <header> wraps a <nav> and an <h1>. Though you can put it on a <div> or <section> etc... instead of a <header>.

/* EDIT Don't put gradient on body, if you don't want it on the whole body */
/* body { */
header {
    font-family: system-ui;
    background-image: linear-gradient(to bottom right, #9710e6, #541a54 );
    background-repeat: no-repeat;
}

<header>
  <h1>Gradient Test</h1>

  <nav>
    <button type="button">ONE</button>
    <button type="button">TWO</button>
  </nav>
</header>

<img src="" alt="">
<p>No gradient down here.</p>
<hr>