[Solved] Place a text above two different solid background colors

by


I still think CSS gradients is the way to go. You can set where the color stop is positioned if you need to. It also doesn’t rely on setting a height.

div {
  background-image: linear-gradient(to bottom, #ee615f, #ee615f 50%, #9f3e3e 50%, #9f3e3e);
  font-family: sans-serif;
  font-size: 40px;
  line-height: 1;
  padding: 25px 0;
  margin-bottom: 25px;
  text-align: center;
}

#div2 {
  background-image: linear-gradient(to bottom, #ee615f, #ee615f 25%, #9f3e3e 25%, #9f3e3e);
}

#div3 {
  background-image: linear-gradient(to bottom, #ee615f, #ee615f 75%, #9f3e3e 75%, #9f3e3e);
}
<div id="div">COLOR STOP AT 50%</div>

<div id="div2">COLOR STOP AT 25%</div>

<div id="div3">COLOR STOP AT 75%</div>

Here’s more info on using them: https://css-tricks.com/css3-gradients/

solved Place a text above two different solid background colors