I have successfully achieved the desired result from top to bottom using the code snippet below:
/* I want to fill with a solid color, but in order to partially fill the background, I found that I needed to use a dummy gradient to achieve the desired effect */
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(blue, blue);
background-size: 100% 50%;
background-repeat: no-repeat;
}<div class="test"></div>Is there a way to fill the div from bottom to top so that the lower half is blue and the upper half is white using this approach?