How can I put a 2 line text heading over an image?

Question

I want to put a text heading over an image , in the center but it keeps cutting in half and it doesn't move to the center.

<header class="text-center">
<img src="img\blueskycrop.jpg" class="img-fluid" alt="bluesky">

   <div class="container">
      <div class="row">
        <div class="col-xl-9">
            <h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1z\>
        </div>
      </div>
   </div>

</header>

What do you mean? What cuts in half? The heading? What doesn't move to the center? — symlink, Sep 13 '19 at 06:37

score 0 · Answer 1 · answered Sep 13 '19 at 06:33

0

i think this is what you want..

here text heading over an image , centered and not cutting..

header{
 position: relative;
}
header img{
 width: 100%;
}
h1{
    position: absolute;
    top: 0;
    color: #fff;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
}

<header class="text-center">
<img src="http://personal.psu.edu/xqz5228/jpg.jpg" class="img-fluid" alt="bluesky">
 <div class="container">
      <div class="row">
        <div class="col-xl-9">
            <h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1z\>
        </div>
      </div>
   </div>
</header>

answered Sep 13 '19 at 06:33

sbrrk

896
1
7
10

I put this code and it works but if I make the font size bigger, the heading splits in 3 rows. – Bogdan Pavel Sep 13 '19 at 07:01
if you need to set only two line of heading with dynamic font size then you need to use line clampin. because you can't do it with only css.. you can find about line clampin [here](https://css-tricks.com/line-clampin/). – sbrrk Sep 13 '19 at 07:22

score 0 · Answer 2 · answered Sep 13 '19 at 06:41

If I understand your question correctly, you want to use a background image, with a size of cover, over the entire header. Then just remove your old image tag. Text outline trick courtesy of this answer Outline effect to text

header.text-center {
  background: url(http://placekitten.com/700/700) center/cover;
  color: white;
  padding: 40px 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header class="text-center">
  <div class="container">
    <div class="row">
      <div class="col-xl-9">
        <h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1>

      </div>
    </div>
  </div>

</header>

@BogdanPavel the `background` property is tricky. You have to use the format `background: url(...) center/cover` in this case. — symlink, Sep 13 '19 at 07:02

How can I put a 2 line text heading over an image?

2 Answers2