CSS background-image is overflowing

Question

I have a background that I'm trying to cover with a gradient but the gradient isn't long enough or something like that

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: linear-gradient(rgba(18, 16, 32, 0.8), rgba(20, 28, 58, 1)) no-repeat, url("imgs/Untitled-1.png") no-repeat;
    background-color: rgb(20, 28, 58);
    background-size: cover;
    background-position: center center;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

I tried changing background-position but nothing helps

Answer 1

with height adjustment: 100%; The gradient extends to cover the entire viewport height .

body
 {
  ....

  height:100%;
 }