How to Put Text Over Images in HTML

Placing text over multiple images

Here you go

JSFiddle

You need to set the parent element to be position: relative, so it's relative to the absolute positioned element, in this case the text.

This centers the element horizontally and vertically:

top: 50%;
left: 50%;
transform: translate(-50%, -50%)

Also you need to apply z-index in order for the text to appear above the image.

.ml-4 {    position: relative;}
.imgText.m-auto {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    z-index: 10;}

<!doctype html>
<html lang="en"> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nerd Arcadia</title>  <meta name="description" content="">  <meta name="author" content="">    <style>   /* The side navigation menu */   .sidenav {    height: 100%; /* 100% Full-height */    width: 0; /* 0 width - change this with JavaScript */    position: fixed; /* Stay in place */    z-index: 1; /* Stay on top */    top: 0; /* Stay at the top */    left: 0;    background-color: #111; /* Black*/    overflow-x: hidden; /* Disable horizontal scroll */    padding-top: 60px; /* Place content 60px from the top */    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */   }
   /* The navigation menu links */   .sidenav a {    padding: 8px 8px 8px 32px;    text-decoration: none;    font-size: 25px;    color: #818181;    display: block;    transition: 0.3s;   }
   /* When you mouse over the navigation links, change their color */   .sidenav a:hover {    color: #f1f1f1;   }
   /* Position and style the close button (top right corner) */   .sidenav .closebtn {    position: absolute;    top: 0;    right: 25px;    font-size: 36px;    margin-left: 50px;   }


   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */   @media screen and (max-height: 450px) {    .sidenav {padding-top: 15px;}    .sidenav a {font-size: 18px;}   }      /* SPACING FOR PICTURES ON SMALLER SCREENS */      @media screen and (max-width: 420px) {        .imgList {margin-top: 25px;}      }            .imgText {        position: absolute;        z-index: -1;      }            .imgList {        z-index: -2;      }        </style>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">   </head>
 <body>    <div id="mySidenav" class="sidenav">   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>   <a href="#">About</a>   <a href="#">Services</a>   <a href="#">Clients</a>   <a href="#">Contact</a>  </div>
  <div class="nav">   <span id="navButton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
            <img id="logo" class="justify-content-center m-auto" src="https://via.placeholder.com/200x100">   </div>
    <div class="row justify-content-center mt-3">      <div class="ml-4 imgList">        <img src="https://via.placeholder.com/200x200">        <div class="imgText justify-content-center m-auto">          test text        </div>      </div>      <div class="ml-4 imgList">        <img src="https://via.placeholder.com/200x200">        <div class="imgText justify-content-center m-auto">          test text        </div>      </div>    </div>

  <script>   function openNav() {    document.getElementById("mySidenav").style.width = "250px";   }
   function closeNav() {    document.getElementById("mySidenav").style.width = "0";   }  </script>

  <!-- jQuery library -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <!-- Popper JS -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>    </body></html>

How to Put Text Over an Image (in email)?

When it comes to text-over-image in email, your safest possible route is rendering the text onto the image and providing ALT tags. This gives you 100% assurance that all text will always be on the image, regardless of device or email client. Many clients out there don't support background images, so while you may get it to render properly on one, there's always that user who still uses Outlook from 2009.

Some of my colleagues have used this site with pretty good results: https://backgrounds.cm/ - but again, it won't work on all clients / devices.

Another solution would be to "fudge" the background. For instance, if the text is going to be over a solid color graphic, you can slice that out independently and use a background color. That way the text is still live. For instance - the image you provided appears to be a banner. Maybe the middle part is simply just a TD with a background color of #2E3E65, and the surrounding elements have the banner image that you provided.

With the above said, though, my strong suggestion is to go the image route. Then focus can be put on responsive testing, versus editing. Hope I helped.

EDIT
Have a look at this: https://www.campaignmonitor.com/css/
If going the code-route is an absolute must, it's a very handy guide that illustrates what elements / tags / properties work on all major email clients. It can also be beneficial information to pass onto a client if they insist on live-text :-)

EDIT 2

I just did everything inline here. The markup can be heavily cleaned up if you want to toss in a style tag, then just add the styles within there (instead of in the html).

<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;">
<tr style="height: 54px;">
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td>
</tr>
</table>

This will produce the "fudge" effect as seen below:
html banner
.

Notes - I just used photoshop to horizontally flip the image. Also, disregard that slight color change. It's just a matter of how I exported the flipped image.

How do i put this text inside the image?

Try like this

h3{
    position: absolute;
    top: -10%;
}

How to Put Text Over Images in HTML

Placing text over multiple images

How to Put Text Over an Image (in email)?

How do i put this text inside the image?

Related Topics

Leave a reply