Welcome to a quick tutorial on how to position text over an image in HTML and CSS. Are you trying to add some captions over an image in HTML? Only to find that there are no “out-of-the-box” HTML ways to do so?
An easy way to position a block of text over an image in HTML is to:
- Wrap the image in a figure caption –
<figure class="txtover"> <img src="IMAGE.jpg"> <figcaption>CAPTION</figcaption> </figure> - Position the caption text over the image –
.txtover { position:relative } .txtover figcaption { position:absolute; bottom:0; left:0; }
But just how does this work exactly? Let us walk through some examples, and you will be able to customize it in any way you want – Read on for more!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
Tutorial Video
DOWNLOAD & NOTES
First, here is the download link to the example source code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
TEXT OVER IMAGE WITH FIGURE CAPTION
All right, let us now get into the example of placing a block of text over an image in HTML and CSS.
STEP 1) ADD FIGURE CAPTION TO IMAGE
<figure class="textover">
<img src="pasta.webp">
<figcaption>Eat your pasta.</figcaption>
</figure>The HTML should be straightforward and easy to understand:
- Captain Obvious to the rescue, we define the image tag
<img>as usual. - Attach the text (or image caption) using
<figcaption>. - Finally, wrap the image and caption in a
<figure>.
Some of you guys who have gone through other tutorials and examples may be wondering – Why not just use a generic <div>? Well, that will work as well. But one key advantage of using <figure> and <figcaption> here is search engine optimization (SEO). Yep, these tags will give search engines more hints as to what the image is about with the captions.
STEP 2) RESPONSIVE IMAGE
/* (A) RESPONSIVE IMAGE */
.textover img { width: 100%; }
.textover { max-width: 600px; } /* optional */Next, we move into the CSS.
- Adding
width: 100%to the image will pretty much solve the modern-day pain of “responsive image for mobile support”. This will automatically scale the image to fit the full width of the screen. - The
max-widthis optional, set this to limit how much the image can stretch.
STEP 3) POSITION THE IMAGE CAPTION
/* (B) CAPTION OVER IMAGE */
.textover { position: relative; }
.textover figcaption {
/* (B1) PLACE AT BOTTOM LEFT */
position: absolute;
bottom: 0; left: 0;
}Moving on, we need to position the text caption over the image.
- Setting
position: absoluteon thefigcaptionwill pretty much do the trick. But take note, this will position the caption relative to the nearest positioned parent. - This is why we need to set
position: relativeon the<figure>container itself. I.E. If we don’t do this, the caption will be positioned relative to<body>instead.
STEP 4) TEXT CAPTION COSMETICS
.textover figcaption {
/* (B2) CAPTION COSMETICS */
width: 100%; padding: 10px;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.6);
}Finally, the rest is pretty much dealing with cosmetics. Set the background color of the caption, choose your font, font size, font weight, color, etc…
THE RESULT
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
EXTRA) CENTERING THE TEXT
<figure class="textcenter">
<img src="pasta.webp">
<figcaption>Eat your pasta.</figcaption>
</figure>Look no further, it’s the same “image with caption”.
/* (A) RESPONSIVE IMAGE */
.textcenter img { width: 100%; }
.textcenter { max-width: 600px; } /* optional */
/* (B) CAPTION OVER IMAGE */
.textcenter { position: relative; }
.textcenter figcaption {
/* (B1) COVER OVER ENTIRE IMAGE */
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
/* (B2) CENTER TEXT */
display: flex;
align-items: center;
justify-content: center;
/* (B3) COSMETICS */
color: red;
font-size: 30px;
font-weight: 700;
}The “text overlay” is slightly different now.
- (B1) We position the caption at the top left corner and cover the entire image with
width: 100%; height: 100%; - (B2) The magic is done by setting the caption to
display: flex–align-items: centerandjustify-content: centerwill automatically center the text horizontally and vertically.
EXTRA) BUTTON OVER IMAGE
<figure class="textcenter">
<img src="pasta.webp">
<figcaption>
<button>A BUTTON!</button>
</figcaption>
</figure>Yes, it is possible to put buttons, other images, forms, and whatever else over the image as well.
LINKS & REFERENCES
- Figure and Figcaption – MDN
- Position – CSS Tricks
- Background – CSS Tricks
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Thanks, dude!