Is there a way to create a div caption similar to a form label (positioned in the middle of the border), but without the div's border interfering? The issue is that I can't just use a background color for the H1 (caption) element because there is a gradient background image applied to the body element that is always visible.
Here is the code snippet:
#text_caption {
border-bottom: 2px solid #838383;
margin-top: 30px;
position: relative;
}
#text_caption H1 {
padding: 0 10px;
position: absolute;
top: -45px;
}
<div id="text_caption">
<h1>inspirations to seeing and doing</h1>
</div>
Everything works well, except for the fact that I need the H1 element to hide the div's border so the background image on the body element can be seen above it.
Here is a JSFiddle example: http://jsfiddle.net/petko3000/crkstrah/
Thank you for your assistance.