How to Overlay Text on an Image Using Tailwind CSS
Adding text overlays over an image is a very useful technique in web page design and Tailwind CSS can not only make this easier but also provide responsive design support.
Tailwind CSS is a great framework to use in general but it can really make things like adding overlay text on images easier.
In this article I'll show how to create text overlays that can be used for just about any aspect of website development such as ecommerce and marketing.
What are text overlays?
Text overlays is a technique of placing styled text over a hero sized background image. The overlay text simply is placed over top of an image and can be adjusted as needed to create elegant imagery.
Why are text overlays important?
The primary reason for using text overlays over images, is to avoid adding the text directly in the actual image. The benefits include:
- The same background image can be resused.
- Change the text rather than redesigning the image.
- i18n language localization.
- Reduces the size of resources and assets that need to be loaded.
Adding text overlays over images
In order to add a text overlay over an image, we'll need a few <div> elements.
Step 1 - Create a container
Create a <div> tag that can be used as an wrapper container.
This container needs to be set to position relative.
<div class="relative">
...
</div>
Step 2 - Add a background image
Add the image using an <img> tag. Try to use an image that allows for some contrast between the text and the image, otherwise it might be hard to read.
<div class="relative">
<img src="/path/to/your/background-image.png" class="w-full rounded"/>
</div>
Step 3 - Add some overlay text containers
Create a new <div> tag inside of the wrapper container that can be used for a text overlay block.
You can create as many text overlay blocks as you need, just make sure that each text block is set to absolute positioning.
Also add any placements with Tailwind utilities:
- top: Set units from the top
- right: Set units from the right
- bottom: Set units from the bottom
- left: Set units from left
The top, right, bottom, left placements are relative to the outer wrapper top/left coordinate position.
Typically, all that's needed is two placements to lock the text overlay block into position. I prefer to use percentages like left-[50%] or top-[50%] because it resizes with an image a little better but any unit measurement is fine.
Since we're using Tailwind, any breakpoint modifiers and font styles can be added to adjust the text block fonts.
<div class="relative">
...
<div class="absolute left-[30%] top-[30%] text-2xl md:4xl">Text 1</div>
<div class="absolute left-[30%] top-[50%] text-xl sm:2xl">Text 2</div>
</div>
And that's all that's needed to create some really useful and creative text overlays on top of images.
Text overlay example
Here's a full example.
<div class="relative">
<img src="/img/blog/assets/tw-overlay-bg.png" width="600" class="w-full rounded"/>
<div class="absolute left-[10%] top-[40%] text-white text-3xl md:text-4xl whitespace-nowrap leading-tight"><b>Variations</b> <br/>on a theme by Mozart</div>
<div class="absolute left-[10%] top-[70%] sm:top-[75%] text-white text-xl italic sm:text-2xl">Fernando Sor (1778-1839)</div>
</div>
Renders the following:
Variations
on a theme by Mozart
Fernando Sor (1778-1839)
In Conclusion
Using text overlays has a huge advantage over just using static images since the text can be changed on the fly. The text can also be internationalized using i18n for different markets while still using the same background image.
Tailwind definitely makes overlays pretty easy to implement without the need to write extra media queries or the need for special classes for rich text blocks.
Hope this was helpful. This is definitely one of those techniques that can really enhance a website. Good luck!