Border breaks behind image [duplicate] - html

Question

This question already has answers here:
Text in Border CSS HTML
(10 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
So I am working on a front end website with React/HTML/CSS to mimic a wireframe design and am curious about achieving the desired effect below where the border breaks just behind the image placement over it. Perhaps there is a trick I can do with the image to give it a similar texture and color as the background image, but I would prefer to use code to achieve the effect. Any ideas on how to achieve this? Is this possible?
Attempted CodePen Link
Relevant CSS:
.middle-logo {
width: 100%;
height: auto;
max-width: 125px;
}
.negative-top-margin {
margin: -50px 0px 0px 0px;
}
.bg-image-container {
position: relative;
text-align: center;
}
.bg-image {
/* The image used */
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(68, 105, 126, 0.788),
rgba(68, 105, 126, 0.788)
),
/* bottom, image */
url("https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/nature.png?alt=media&token=f2dc74ac-bb80-4847-9345-f47346f736de");
/* Full height */
height: 700px;
/* Center and scale the image nicely */
background-position: 50% 35%;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-content {
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
width: 75%;
}
.bg-content:before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
border: 1px solid white;
}
.bg-h1 {
font-size: 2.5em;
margin: 0;
}
.bg-p {
font-size: 1.2em;
}
.bg-text-box {
padding: 50px 0 50px 0;
}
Design to achieve:

Answer 1

This is one way to do it. Remove the top border and use :after and :before elements for those top lines.
BTW Your image is not completely symmetrical, it should have the same empty space in both sides for it to look perfect.
.middle-logo {
width: 100%;
height: auto;
max-width: 125px;
}
.negative-top-margin {
margin: -50px 0px 0px 0px;
}
.bg-image-container {
position: relative;
text-align: center;
}
.bg-image {
/* The image used */
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(68, 105, 126, 0.788),
rgba(68, 105, 126, 0.788)
),
/* bottom, image */
url("https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/nature.png?alt=media&token=f2dc74ac-bb80-4847-9345-f47346f736de");
/* Full height */
height: 700px;
/* Center and scale the image nicely */
background-position: 50% 35%;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-content {
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
width: 75%;
border: 1px solid white;
border-top: 0;
}
.bg-content:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: calc(50% + 125px/2);
height: 1px;
background: white;
}
.bg-content:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: calc(50% + 125px/2);
height: 1px;
background: white;
}
.bg-h1 {
font-size: 2.5em;
margin: 0;
}
.bg-p {
font-size: 1.2em;
}
.bg-text-box {
padding: 50px 0 50px 0;
}
<div class="bg-image-container">
<div class="bg-image"></div>
<div class="bg-content">
<img
class="responsive middle-logo negative-top-margin"
alt="creek"
src="https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/Asset%202.png?alt=media&token=df5a94b2-2b06-4fd8-947e-13dd0d5abbf9" />
<br/>
<div class="bg-text-box">
<h1 class="bg-h1">Committed to Montgomery County</h1>
<div class="m-width center">
<p class="bg-p">Working with partners and communities across the county to address long-term quality of life challenges and opportunities.</p>
</div>
</div>
</div>
</div>