Is there a way to create a color bar beneath the title using only HTML and CSS without relying on background images? I want the bar to be flush with the text and have some flexibility in terms of width to prevent wrapping.
Alternatively, can you position an image at the bottom with specified left and right margins only for the background image to allow better control over its positioning?
.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.sstatic.net/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;
}