0

I have managed to achieve what I'm trying to do from top to bottom using the following:

/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.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 other half is white in this example?

MikeKatz45
  • 545
  • 5
  • 16
  • Does this answer your question? [CSS: Set a background color which is 50% of the width of the window](https://stackoverflow.com/questions/8541081/css-set-a-background-color-which-is-50-of-the-width-of-the-window) – amirify Aug 10 '21 at 19:08
  • @amirify thank you, basically yes I just had to change the angle of the gradient compared to what was given in the answer – MikeKatz45 Aug 10 '21 at 19:45
  • @TylerH thank you, this is actually what works the best for my specific needs – MikeKatz45 Aug 10 '21 at 19:45
  • @MikeKatz45 I converted my comment to an answer; please see below. – TylerH Aug 10 '21 at 19:59

2 Answers2

3

You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.

/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
  background: blue;
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(white, white);
  background-size: 100% 50%;
  background-repeat: no-repeat;
}
<div class="test"></div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
2

is this what you mean to do? You can change the background-size: 100% 70% to play with how far you want it to feed into the other space.

.test {
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(white, blue);
  background-size: 100% 70%;
  background-repeat: no-repeat;
  background-position: bottom;
}
<div class="test">
</div>
Brandon
  • 374
  • 2
  • 15