Hide part of a border in CSS?

Question

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

Answer 1

This is a common problem.

My solution is:

1. Set the background of .panel-header as the same of the background image.
2. Set z-index: 0 to make it to the top layer.
3. Adjust the background-position property.

When you adjust the background-position, you can also use jQuery to calculate the offset to make it accurate.

Hope it helps, see the snippet.

---

The effective code is just to add:

.panel-header {
    z-index: 0;
    background-image: url(http://placekitten.com/510/200);
    background-position: -66px -38px;
}

---

The snnipet:

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

.panel-header {
    position: relative;
    top: -1.5em;
    // here!
    z-index: 0;
    background-image: url(http://placekitten.com/510/200);
    background-position: -66px -38px;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}

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

  
    Title Goes Here
    
  
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
  




  

    
      Title Goes Here
      
    
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.