How to put text over an image
Overlaying text on images is a common design technique that can enhance the visual appeal of your web pages. Whether you want to add captions, titles, or any other text, there are several methods to achieve this effect using HTML and CSS. In this article, we'll explore different techniques to put text over an image.
Using Bootstrap
Bootstrap provides utility classes to easily overlay text on an image.
- Use Bootstrap's Flexbox utility classes
d-flex
,align-items-center
, andjustify-content-center
to center the text over the image.
Page title
<div
class="bg-image d-flex justify-content-center align-items-center"
style="background-image: url('...');
height: 30vh;
">
<h1 class="text-white">Page title</h1>
</div>
Using CSS Positioning
One of the most common methods to overlay text on an image is by using CSS positioning. This method involves placing the image and text within a container and using the position
property to layer the text over the image.
- The container div is used to position the image and text relative to each other.
- The image is set to be responsive within the container.
- The text is absolutely positioned at the center of the image using
top
,left
, andtransform
properties.
![Sample Image](https://mdbcdn.b-cdn.net/img/new/fluid/nature/015.webp)
<div style="position: relative; width: 100%; max-width: 400px;">
<img src="image.jpg" alt="Sample Image" style="width: 100%; height: auto;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-align: center;">
Overlay Text
</div>
</div>
Using CSS Flexbox
Flexbox can also be used to center text over an image easily and responsively.
- The container div uses Flexbox to center the text over the image.
- The
justify-content
andalign-items
properties center the text horizontally and vertically. - The text is absolutely positioned to ensure it stays on top of the image.
![Sample Image](https://mdbcdn.b-cdn.net/img/new/fluid/nature/015.webp)
<div style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 400px;">
<img src="image.jpg" alt="Sample Image" style="width: 100%; height: auto;">
<div style="position: absolute; color: white; font-size: 24px; font-weight: bold; text-align: center;">
Overlay Text
</div>
</div>
Using CSS Grid
CSS Grid provides a flexible way to layer text over an image.
- The container div uses CSS Grid to overlay the text on the image.
- Both the image and text are placed in the same grid area using
grid-area: 1/1;
. - The
place-self: center;
property centers the text within the grid area.
![Sample Image](https://mdbcdn.b-cdn.net/img/new/fluid/nature/015.webp)
<div style="display: grid; position: relative; width: 100%; max-width: 400px;">
<img src="image.jpg" alt="Sample Image" style="grid-area: 1/1; width: 100%; height: auto;">
<div style="grid-area: 1/1; place-self: center; color: white; font-size: 24px; font-weight: bold; text-align: center;">
Overlay Text
</div>
</div>