Web Developers build websites with rich aesthetics for better engagement and user delight. One such visual aspect that developers incorporate while developing any webpage is positioning text over an image. Keeping responsiveness into consideration, it is important to ensure that the text remains consistent even when the image resizes itself due to its responsive behavior.
This article discusses the step by step methods to Position Text over Image for all Orientations, the method to Position Text over Image for Responsive Images, and how to Test the Responsiveness of the resulting image with text.
How to position Text over an Image using CSS (All the Orientations)
An easy and straightforward way to position text over an image is by using CSS. The idea behind its implementation is to put all the elements, including the image and the text element, inside the same container div in the HTML file. After that, you have to apply the CSS on each element in the CSS section of the project.
Step 1: Create an HTML file and put image and text elements in one parent container div, as seen below.
<html> <head> <title> text over image css </title> <link rel=”stylesheet” href=”style.css”> </head> <body> <div class=”parentContainer”> <img src=”photo.jpg” alt=”Landscape”> <div class=”centered”>Centered</div> <div class=”bottom-left”>Bottom Left</div> <div class=”top-left”>Top Left</div> <div class=”top-right”>Top Right</div> <div class=”bottom-right”>Bottom Right</div> </div> </body> </html>
Step 2: Positioning text on the image using CSS
Once all the elements are placed, you just have to apply CSS on the elements to align them as intended. In this step, applying CSS for the elements to position them in several orientations over the image, such as bottom-left, bottom-right, and more.
img{ height: 100%; width: 100%; } .parentContainer { position: relative; text-align: center; color: white; } .bottom-left { position: absolute; bottom: 10px; left: 15px; } .top-left { position: absolute; top: 10px; left: 15px; } .top-right { position: absolute; top: 10px; right: 15px; } .bottom-right { position: absolute; bottom: 10px; right: 15px; } .centered { position: absolute; top: 50%; left: 50%; }
The resulting image photo.jpg looks like the below after positioning text over it in different orientations.
How to position text over a Responsive Image
Responsive webpages are necessary from a user experience standpoint. It also improves the overall SEO and enhances content visibility on the web. Responsive images are vital for a responsive website, and while positioning text over a Responsive Image, it is essential to ensure that the text alignment remains intact without impacting the responsiveness of the image.
Step 1: Create an HTML file
In the HTML file, use the figure tag to initialize the photo in the document. The reason behind implementing the figure and figcaption tags in the HTML is to leverage the Search Engine Optimization (SEO) of the document.
<html> <head> <title> text over image css </title> <link rel=”stylesheet” href=”style.css”> </head> <body> <figure class=”image”> <img src=”picture.jpg” alt=”background”> <figcaption>This is the text over image</figcaption> </figure> </body> </html>
Step 2: Positioning text on the image using CSS
To solve the issue of responsiveness, width is added as 100%. Moreover, setting the position of the figcaption as absolute will keep the text to the nearest positioned parent element. Also, you can apply more CSS to further enhance your text while positioning it over the image.
.image img { width: 100%; height: 100%; } .image { position: relative; } .image figcaption{ position: absolute; top: 50%; bottom: 50%; left: 40%; }
The resulting responsive image picture.jpg looks like the below after positioning text over it.
How to Test the Responsiveness of Images with Text
Now that you have created images that contain text over it, it is necessary that the images being used in the webpage are responsive. This means that text and images do not break their connection even if the webpage is rendered on several devices. Hence, it is always advisable to test the responsive images before making them live.
Using BrowserStack Responsive to check the responsiveness of images with text on several devices.
Free Responsive Test on Commonly Used Resolutions
Try testing the responsiveness of your website on real devices.