How to create a flexible background image with CSS - html

Question

I am trying to set up my H1 tags with an expanding background-image, that serves as a "lower border" for the title, similar to this:
Here is the fiddle I am working with:
https://jsfiddle.net/gq4b7vu4/
#logoBuild {
width: auto;
border: 1px solid #F500FD;
}
h1 {
text-align: center;
color: #958a68;
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
display: table!important;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
}
}
#titleBottom {
border: 2px solid #0FEEF1;
}
#leftBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#rightBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#centerBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
float: left;
width: auto;
}
#descenderBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png");
background-repeat: repeat-x;
float: left;
width: 1px;
height: 27px;
}
<div id="pageHead">
<div id="logoBuild">
<h1>Title goes here</h1>
<div id="titleBottom">
<div id="leftBottom"></div>
<div id="centerBottom"></div>
<div id="rightBottom"></div>
</div>
<div style="clear:both;"></div>
<div id="descenderBottom"></div>
</div>
I need the graphic to expand according to the width of the title, with the end flourishes on either side and the descender beneath it.
I've tried to build the border after (separate from) the H1 declaration, and I tried placing the H1 inside of the centerBottom div, both to no avail.

Answer 1

Well this was a lot of fun
https://jsfiddle.net/gq4b7vu4/3/
Changed many of your styles to just psuedo content selectors.
#pageHead { overflow: visible; }
.logoBuild {
display: block;
width: 600px;
margin: 0 auto;
}
h1 {
position: relative;
display: inline-block;
width: auto;
min-height: 75px;
margin: 0 auto;
text-align:center;
color:#958a68;
font-family: 'Cantarell', sans-serif;
text-transform:uppercase;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
background-position: 0 48px;
overflow: visible;
}
h1 img {
position: absolute;
top: 68px;
left: 50%;
}
h1::before {
position:absolute;
left:-48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
}
h1::after {
position: absolute;
right: -48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
}
<div id="pageHead">
<div class="logoBuild">
<h1>
Title goes here
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
<div class="logoBuild">
<h1>
Oh hey another cool one
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
</div>
Things to note, min-height on that h1. You'll also need some bottom margin added to that header tag. There's an inline image in the header tag, didn't see an easy way to get around that, but assuming it could be implemented through more psuedo selectors and or a non-block element.