Overlap border of parent with h2 margin negative

Question

I want to achieve this effect:

but with image background. I tried everything

Answer 1

I would use a different div. Make that background white and put it on top.

here is the jsfiddle

https://jsfiddle.net/0wet9Lf7/

CSS

    .main {
    border:2px solid #000;
    width:400px;
    height:200px;
    background:none;
    padding:10px;
}
.title {
  background: #fff none repeat scroll 0 0;
    font-size: 21px;
    height: 30px;
    margin-left: 141px;
    margin-top: -21px;
    padding: 3px;
    text-align: center;
    width: 100px;

}

Answer 2

The solution I can think of is having it all in a table with three columns, top left and top right td can have a border-bottom: 1px solid.. and the middle td can have no bother, with the text either relatively placed or with negative margin so that it's vertically in the middle between the border-top (or border bottom) of the left and right TDs, maybe something like:

<table style="border: 0px 1px 1px 1px solid black;">
  <tr>
    <td style="border-bottom: 1px solid black;"></td>
    <td><div style="position: relative; top: 10px;">text</div></td>
    <td style="border-bottom: 1px solid black;"></td>
 </tr>...

Answer 3

You can create the top borders separately (left + right with pseudo content).

body {
    background: gold;
}
div {
    border: 1px solid black;
    border-top-width: 0;
    text-align: center;
}
h2 {
    display: table;
    width: 100%;
    margin-bottom: -10px;
}
h2:before, h2 > span, h2:after {
    display: table-cell;
    white-space: nowrap;
}
h2 > span {
    padding: 0 10px;
    position: relative;
    top: -10px;
}
h2:before, h2:after {
    content: "";
    border-top: 1px solid black;
    width: 50%;
}

<div>
    <h2><span>Hello World</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 4

Abusing <fieldset> and <legend>.

Not semantic but effective.

body {
  background: pink;
}
legend {
  margin: auto;
  width: 25%;
  text-align: center;
}
fieldset {
  text-align: center;
  border: 10px solid red
}

<fieldset>
  <legend>About Us</legend>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur illo est eius temporibus unde earum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur consectetur maiores laudantium officiis adipisci quasi est commodi voluptas perferendis ex itaque hic qui dolorem alias!</p>
</fieldset>