How to add a color bar that sits half beneath the title text with css only? To only fill the bottom half of a div with a color?

Question

I have a request to do the following in html and css (see the image), to put a color bar beneath the title. It seems to me it's doable with a div background image, but pretty uncontrollable, and complex. And would be easy for the title text to wrap. (the bar needs to be flush with the text.

Any thoughts on how to do this with css only and no background image, in a way where the bounding div for the title does not have to have exact width, and can have some extra leeway to avoid wrapping the title text?

Or, is there a way to position the image at the bottom while at the same time specifying a left and a right 'margin' as it were just for the background image, so as to be able to control its fine positioning better?

.title_container{
  top: 10px;
  left:10px;
  width: 500px;
  height: 200px;
  color: #fff;
  background-color: #437199;
  position: relative;
  text-align: center;
  padding-top: 20px;  
}

.title{
    margin: 0px 20px;
    height: 40px;
    background-image: url("https://i.stack.imgur.com/zJqH5.png");
    background-position: bottom;
    background-repeat: repeat-x;
}

.title_sub_text{
    padding-top: 10px;
    font-weight: bold;
    overflow: hidden;
    position: relative;
}
h1{
    top:10px;
    /* position: absolute; */
}

button, button:hover, button:active, button:focus{
    width: 210px;
    height: 46px;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    background-color: #967e2c;
    border-bottom: 4px solid #f1ba43;
    padding-top: 4px;
    margin: 20px 0px;
    border-style: solid;
}
button:active {

    border-style: solid;
}

<div class="title_container"> 
<div class="title"><h1>Lorum Ipsum Lorum Ipsu Title</h1></div>
<div class="title_sub_text">Bacon Ipsum Bacon Ipsum Bacon Subtitle</div>
<button type="button">Call To Action</button>
</div>

You can use [background image](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()) with gradient instead of using an image for background. . — Sfili_81, Jul 13 '21 at 11:42
The simplest way is to use CSS gradients and make a hard stop at 50%. There are some good generators like this one here: https://cssgradient.io/ — Stirling, Jul 13 '21 at 11:50

score 1 · Accepted Answer · answered Jul 13 '21 at 11:51

Tadaaa

.title_container{
  top: 10px;
  left:10px;
  width: 500px;
  height: 200px;
  color: #fff;
  background-color: #437199;
  position: relative;
  text-align: center;
  padding-top: 20px;  
}

.title{
    margin: 0px 20px;
    height: 40px;
 /*    border-bottom:15px solid navy;    */
   background:
    linear-gradient(#437199,#437199) 0 calc(-1px)/100% 22px no-repeat,
    navy;
}



.title_sub_text{
    padding-top: 10px;
    font-weight: bold;
    overflow: hidden;
    position: relative;
}
h1{
    top:10px;
    /* position: absolute; */
}

button, button:hover, button:active, button:focus{
    width: 210px;
    height: 46px;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    background-color: #967e2c;
    border-bottom: 4px solid #f1ba43;
    padding-top: 4px;
    margin: 20px 0px;
    border-style: solid;
}
button:active {

    border-style: solid;
}

<div class="title_container"> 
<div class="title"><h1>Lorum Ipsum Lorum Ipsu Title</h1></div>
<div class="title_sub_text">Bacon Ipsum Bacon Ipsum Bacon Subtitle</div>
<button type="button">Call To Action</button>
</div>

Thanks I like this. But how do you have pixel perfect control over the left and right sides of the blue colored bar? Like have it align perfectly with the title for instance? — Agent Zebra, Jul 13 '21 at 12:02

How to add a color bar that sits half beneath the title text with css only? To only fill the bottom half of a div with a color?

1 Answers1