How to make such a header in CSS

Question

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...

Please show relevant code. See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. As it stands I don't understand why you can't have both your background image and a linear-gradient making the line. — A Haworth, Mar 23 '22 at 07:12

score 0 · Answer 1 · answered Mar 23 '22 at 07:18

0

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>

answered Mar 23 '22 at 07:18

jeremy-denis

6,368
3
18
35

score 0 · Answer 2 · answered Mar 23 '22 at 07:19

0

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;
}

answered Mar 23 '22 at 07:19

UPinar

1,067
1
2
16

Horrible markup. No need for all these divs, you can put the classes directly on the `img` and `p` tags. From semantic way, the lines should be a background image and not an actual `img`. – cloned Mar 23 '22 at 07:26
yes you can do it without divs, but i don't understand why the lines should be a background image from semantic way? can you explain pls @cloned and FYI img's are not a good elements to deal i prefer inside divs. you can just leave alt="" – UPinar Mar 23 '22 at 07:35
1

Thanks for an idea. And yes, there is no need to upload one more image. We'd better use div backgrounds or border instead! – Movs Mar 23 '22 at 07:49

score 0 · Answer 3 · answered Mar 23 '22 at 07:51

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>

How to make such a header in CSS

3 Answers3