How to write text over Image in HTML

By  ShC    16 - 09 January, 23
How to write text over image in html

Share article on social media


In this article i'll be explaing you, How to write text over image in Html. To write text over an image in HTML, you will need to use the position and z-index CSS properties.

Here is an example of how to write text over image in html :

<style>
  .image-container {
    position: relative;
  }
  .image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    font-size: 36px;
    font-weight: bold;
  }
</style>
<div class="image-container">
  <img src="image.jpg" alt="image">
  <div class="image-text"<Text over image</div>
</div>

In this example, we have a container element with the class image-container that contains both the image and the text. We use the position: relative property on the container to create a new positioning context. This allows us to position the text absolutely within the container.

Learn How to make border in CSS .

Next, we use the position: absolute property on the text element and specify the top and left properties to position the text in the center of the image. We also use the transform: translate(-50%, -50%) property to adjust the text's position so that it is centered both horizontally and vertically.

Finally, we use the z-index property to specify that the text should be displayed on top of the image. We also add some styling to the text to make it more visible, such as setting the color to white and the font-size to 36px.

With these properties in place, the text will now be displayed over the image. You can adjust the positioning and styling of the text as needed to achieve the desired effect.

I hope, know you can write text over an image .