How do you apply text to an image in your tribute page?

1

please and thanks for guidance

2

You can try this, play with the position of the text. :wink:

HTML

<div class="image">
  
  <img src="https://www.thehappycatsite.com/wp-content/forum/uploads/2017/09/calico.jpg" alt="kitty looking at me.">
  
<h2 style="color:green">Nina the Cat</h2>


  
</div>

--------------------------------------------------------------------------------------------------------------------------------------------------

CSS

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 10px; 
   width: 100%; 
   
}
3

Thank you!! Very kind of you lucasarvelo

1 Like
4

Just to toss in a second option, you can try utilizing the image as a background:

<div class="image">

  <h2>Nina the Cat</h2>
  
</div>

/* css */

.image {
 background: url("https://www.thehappycatsite.com/wp-content/forum/uploads/2017/09/calico.jpg") no-repeat center center;
 background-size: cover;
 width: 100%;
 max-width: 800px;
 height: 100%;
 min-height: 500px;
 position: relative;
}

h2{
 color: green;
 position: absolute;
 bottom: 0px;
}