Opt for using min-height over height:
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
min-height: 100vh;
}
.blocktest {
height: 1500px;
}
<div class="blocktest">
test
</div>
By setting a 100vh limit on your body, the background extends to the root element. As a result, you see two backgrounds overlapping each other.
To observe this behavior and additional background effect, maintain height:100vh with an extra background for the html tag:
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
height: 100vh;
}
.blocktest {
height: 1500px;
}
html {
background:pink;
}
<div class="blocktest">
test
</div>
If you wish to confine the background to only 100vh, adjust the background of html or prevent repetition:
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
height: 100vh;
/* Or background-repeat:no-repeat */
margin:0;
}
.blocktest {
height: 1500px;
}
html {
background:white;
}
<div class="blocktest">
test
</div>
For more insights, check out: How to remove the stripes that appear when using the linear gradient property