Search code examples
htmlcssbackground-color

Place a text above two different solid background colors

Does anyone know how to place a text over two different solid background colors? At the same time it remains responsive when minimizing the screen. I have seen this being done alot, however, I am still researching the standard method to coding this style. Below I added the image of the style I wanted to do. Thank you for your time.

image displaying text over two solid colors

Solution

  • 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/