How to put h1 on the image

Question

How can I put a text with id "text-reklama" on the image with id "reklama".I tried this but it doesnt working. Suggestions?

HTML:

<div id="reklama-div">
    <img class="letna" src="Reklama/Letna.jpeg" width="949" height="632"
    <h1 class="text-reklama">SLEDUJ ŽIVĚ</h1>
</div>

CSS:

#reklama-div{
position:relative;
}
#reklama-div h1{
position:absolute;
}
#reklama-div img{
position:relative;
}

Does this answer your question? [Place text on image](https://stackoverflow.com/questions/45894427/place-text-on-image) — Amaresh S M, May 24 '20 at 08:56

score 1 · Answer 1 · answered May 24 '20 at 08:54

When absolute positioning you need to set the coordinates for the location (top, left, bottom, right available).

#reklama-div {
  position: relative;
}

#reklama-div h1 {
  position: absolute;
  top: 15px;
  left: 15px;
}

#reklama-div img {
  position: relative;
}

<div id="reklama-div">
  <img class="letna" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg" width="949" height="632" />
  <h1 class="text-reklama">SLEDUJ ŽIVĚ</h1>
</div>

score 1 · Answer 2 · answered May 24 '20 at 09:04

Try the code below.

#reklama-div{
position:relative;
height: 200px;
width: 200px;
}
#reklama-div h1{
margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
#reklama-div img{
height: 100%;
width: 100%;
}

<div id="reklama-div">
    <img class="letna" src="http://phiz.live/portal/assets/theme/img/c1.png" width="949" height="632">
    <h1 id="text-reklama">SLEDUJ ŽIVE</h1>
</div>

score 0 · Answer 3 · answered May 24 '20 at 09:05

First of all, I have figured out one thing in your code that img tag is not closed. :)

After closing img tag, you need to add top and left properties on h1 tag based on your design or decision.

#reklama-div h1 {
  position: absolute;
  top: some_value;
  left: some_value;
}

How to put h1 on the image

3 Answers3