'How to make such a header in CSS [duplicate]

I need an idea how to make such a header in css. Usualy I make such a things by setting up backgroud behind the text and moving the text up by negative margin. But here I have a background image behind. Any ideas pls...enter image description here

css


Solution 1:[1]

one idea can be to use hr in a div to draw line

.inline hr {
  width:40%;
}


.inline {
  display: flex;
  flex-direction: row;
}
<div class="inline">
  <hr/>
  <span>14 days trial</span>
  <hr/>
</div>

Solution 2:[2]

You can go with

<div class= 'container'>
  <div class="image1">
    <img src="" alt="" />
  </div>
  <div class="text">
    <p></p>
  </div>
  <div class="image2">
    <img src="" alt="" />
  </div>
</div>

and than apply

.container{
  display:flex;
  flex-direction: row;
}

Solution 3:[3]

Another Idea.

 
    
hr.right {
    float:right;
    width:40%;

}

hr.left{
    float:left;
    width:40%;
    max-width

}

img {
    background-size:cover;
    height:100px;
    width:100%; 
    top:0;
    }
 
.myheader {
   top:80px;
   position:relative;
   overflow:overlay;
   }
    
<div>
  <div class="myheader"><hr class="left">MY TEXT HERE<hr class="right"></div> 
    <img src="https://thumbs.dreamstime.com/b/watercolor-poppy-bottom-border-horizontal-floral-background-abstract-pink-flowers-leaves-white-botanical-illustration-180021083.jpg">          
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeremy-denis
Solution 2 UPinar
Solution 3 Crystal

Related Questions