-1

I have this code: https://codepen.io/aceraven777/pen/dyPGBeX

HTML:

<html>
  <body>
    <div class="box">
      <div class="title-container">
        <h1>title</h1>
      </div>
      <p>this is the description</p>
    </div>
  </body>
</html>

CSS:

body {
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg');
      background-size: cover;
  padding-top: 30px;
}

.box {
  border: 2px solid white;
  width: 100px;
  margin: auto;
  padding: 30px;
  position: relative;
}

.box .title-container {
  position: absolute;
  top: -22px;
  left: 0;
  width: 100%;
  text-align: center;
}

.box .title-container h1 {
  background-color: transparent;
  margin: 0;
  padding: 3px 10px;
  display: inline;
}

This is the output of the HTML:

enter image description here

Remember, here I'm using a background image, NOT a solid background color.

On the title part, I want the border to not strike the title, I want the border to be transparent to that part, how can I achieve this?

aceraven777
  • 4,358
  • 3
  • 31
  • 55
  • @Gerard, that does not answer my question, because I'm using a background image here. I don't want to put a background color in the title, I want to make it transparent – aceraven777 Dec 10 '19 at 09:05
  • read *all* the answers of the duplicate and you will find transparent solutions – Temani Afif Dec 10 '19 at 09:08
  • 1
    I actually used most of related answers, I can feel the guy though, using those solutions will ruin the background image. 2 possible solutions came to my mind, using image title or 2 seperate top border. – Shiz Dec 10 '19 at 09:12
  • either you can use fieldset or to remove the top border you can specify border-top property it in style like "border-top: transparent;" – Amal Ps Dec 10 '19 at 09:18
  • @Shizukura the accepted answer below is the second one in the duplicate question. Reading the duplicate carefully will give you the answer and it will not ruin any background (of course if we take the time to click and read the duplicate) – Temani Afif Dec 10 '19 at 09:29

2 Answers2

3

What you needed is HTML fieldset.

 <fieldset>
  <legend style="text-align: center;">Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

Use below html and css:

<html>
  <body>
 <div id="content">
    <div class="titlebox"><span><b>title</b></span></div>
    <p>this is the description</p>
</div>
  </body>
</html>

CSS:

 #content{
    position:relative;
    margin:100px;
    border:solid #999;
    border-width:0 2px 2px;
    padding-top:1px;
}
.titlebox{
    position:absolute;
    top:-.6em;
    left:0;
    padding:.6em 0 .6em;
    width:100&#37;;
    height:2px;
    overflow:hidden;
    font-size:100%; /* any size */
    line-height:1.2; /* corresponds to the padding and margins used */
}
.titlebox span{
    float:left;
    border:solid #999;
    border-width:0 72em 0 30px;
    height:2px;
}
.titlebox b{
    position:relative;
    display:block;
    margin:-1.2em 0 -.6em;
    padding:.6em 5px 0;
    font-weight:400;
}
BInjal Patel
  • 321
  • 3
  • 16