Border breaks behind image

Question

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:

Appears that users have flagged this question as a duplicate, citing questions about border breaking to text, which requires a different solution than border breaking to an image. Fortunately, my question got a great answer before being closed, but I really wish the mods on StackOverflow were more welcoming to questions. — douglasrcjames, Aug 25 '20 at 17:06

score 2 · Accepted Answer · answered Aug 25 '20 at 03:26

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>

Love it, good thinking! I will talk to my designer about the logo not being symmetrical, I see how that affects the border. Thank you! — douglasrcjames, Aug 25 '20 at 06:24

Border breaks behind image

1 Answers1

Linked