Nathan Rabe Nathan Rabe - 2 months ago 9
CSS Question

Hide part of a border in CSS?

I have a few simple CSS classes for a panel with a header. It works great when the background is a fixed color because I have to use that color to hide the border behind the header text. However, I now want to have a background image instead of a solid color.

Is there a way to have the header element cover up the parent element's border AND allow the background image to show through? I can easily set the color to

transparent
, but nothing I've found will cover the border other than a solid color or image.

I have a hunch it could be done with JS and reusing the image as the background of the header and setting some offsets based on the position on the page, but that seems overly complicated, and won't work for me since I'd like to account for several layered background images forming a pattern, or fixed attachment which would constantly have to be recalculated.

Is there a way to do this?

Good and Bad Examples



.panel {
border: 2px solid #000000;
padding: 1em;
margin: 1em;
display: block;
}

.panel-header {
position: relative;
top: -1.5em;
background-color: #ffffff;
padding-left: 0.4em;
padding-right: 0.4em;
font-size: 1.2rem;
font-weight: bold;
}

.panel-content {
margin-top: -0.5em;
}

<div class="panel">
<span class="panel-header">
Title Goes Here
</span>
<p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div>

<hr/>

<div style="background-image: url(http://placekitten.com/510/200); padding: 2em;">
<div class="panel">
<span class="panel-header">
Title Goes Here
</span>
<p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div>
</div>




Answer

here's the sample of what you need:

Firs of all, you need a container div with your Background (i've grabbed one from internet for this example).

After this, you need to use and snippets from HTML.

Your CSS

div {
    padding: 30px;
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkAuRoZnkLBZlEYtgL5GJ5w_2Tufpxh5PqkOf-Negy7eL-JGC5Mk-DW-I) no-repeat  center center;
    background-size: cover;
}

fieldset {
    border: 2px solid black;
    padding: 10px;
}

Your HTML

<div>
 <fieldset>
  <legend>Personalia:</legend>
  <p>some text here</p>
 </fieldset>
</div>

Here you can see the Fiddle

Comments