Flexible-width centered heading banner with three background images? - css

Question

The site I'm working on has headings that look like this:
http://i.imgur.com/ssvj8J1.png
They need to...
a) be centered on the page
b) be flexible width, to fit the contained text with a few em of padding either side.
c) work on IE9+, and of course all the other modern browsers
d) work on any background (so the images used can't contain white bits to help with overlaying)
I started off chopping it into 3 bits, and using ::before and ::after. This had problems with the backgrounds overlapping.
I then tried a sliding-doors approach, with just 2 images, but obviously had similar problems.
Now I'm on multiple BG images, which I've not used before. Same problem as above, they overlap. The solution seems to be to "clip" the middle one to content-box, but then that limits the padding I can use to strictly 53px, the "width" of each end bit of the banner, making them look too cramped?
Also, what's the best way of centering these? They're h1 tags. Do I need to use positioning/translation/inline-block? Or can I somehow keep them as 100% width block elements (which would be easier/better) and just centralise the backgrounds?
This is what I had before I tried to make them fluid:
h1{
background:url(banner.png) 50% 0 no-repeat;
line-height:52px;
color:#fff;
padding:0 0 6px}
And this is where I'm at now:
h1{
background-image:url(banner-left.png), url(banner-mid.png), url(banner-right.png);
background-position:0%, 50%, 100%;
background-repeat:no-repeat, repeat-x, no-repeat;
background-clip:border-box, content-box, border-box;
line-height:52px;
color:#fff;
display:inline-block;
padding:0 53px 6px}
I'm not happy with this for the reasons mentioned above. I feel I'm missing some obvious/easy tricks?!
Thanks - CSS seems to have moved on a lot since I last did anything significant!

Answer 1

You can use a pseudo elements and avoid the images completely.
Codepen Demo
HTML
<div><h1><span>Short Text</span></h1></div>
<div><h1><span>Much Longer Text</span></h1></div>
CSS
body {
text-align: center;
}
div {
margin: 25px;
}
h1 {
position: relative;
line-height: 1em;
max-width:50%;
display: inline-block;
}
h1 span {
color:gold;
padding: .5em;
background: black;
box-shadow:
0 0 0px 1px gold,
0 0 0px 3px black;
}
h1::before, h1::after {
position: absolute;
content:"";
top:35%;
z-index:-1;
border: solid black;
border-width:25px;
}
h1::before { /* left */
border-left-color:transparent;
left:0;
transform:translateX(-75%)
}
h1::after { /* right */
border-right-color:transparent;
right:0;
transform:translateX(75%)
}