Question 196593 in Html Question posted in
Some basic documentation can be found here.

Html – How to position text over image?

I have image at the top of the page, then some text below it. What I need is roughly first line of text to be on image. What is a best way to do it using CSS 2 (I’m targeting old devices)?

<html>
<head>
<title></title>
<style>
p.image {
    text-indent: 0;
    text-align: center;
}

p.image img {
    max-width: 100%;
}
</style>
</head>
<body>
<p class="image"><img src="image.png"/></p>
<h2>Title<br/>
title</h2>
<p>Lorem ipsum.</p>
</body>
</html>
Tags:

2

Answers


  1. 0 
    .image {
   text-indent: 0;
   text-align: center;
   position: relative;
}

.image img {
   max-width: 100%;
}
.heading-1{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   margin: 0px;
    <html>
<body>
<div class="image">
<img src="image.png"/>
<h2 class="heading-1">Title<br/>
title</h2>
</div>
<p>Lorem ipsum.</p>
</body>
</html>
    Login or Signup to reply.
  2. 0

    You simply need to give a negative "margin-top" to the h2 tag. But if your image is smaller then it would be in the center so in that case, you can add "text-align: center;" to the h2 tag as well so that the text goes to the center with the image.

        *{
        margin: 0;
        padding: 0;
    }

    p.image {
        text-indent: 0;
        text-align: center;
    }

    p.image img {
        max-width: 100%;
    }

    h2{
        margin-top: -30px;
        
        /* text-align: center; */
    }
    <html>
  <body>
    <div class="image">
      <img src="https://picsum.photos/1920/1080.jpg"/>
      <h2 class="heading-1">Title<br/>
      title</h2>
    </div>
    <p>Lorem ipsum.</p>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search