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.
Table of ContentsHow 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.
photo.jpg
<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.
picture.jpg
<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.
Try testing the responsiveness of your website on real devices.
Follow the easy steps below to test your responsive image on BrowserStack Responsive:
Step 1: Open BrowserStack Responsive Dashboard and enter the URL of the webpage containing the responsive image. If you have created a website on your local machine, you must host your website to test its responsiveness on BrowserStack Responsive.
Step 2: To check responsiveness, click Check.
Step 3: The user can check how the site appears on a certain device after choosing it.
Conclusion
Positioning text over an image using CSS is an easy yet necessary approach one should keep in mind during development to keep the responsiveness of the image intact. This can be easily achieved with the help of several CSS properties. CSS properties to position text over an image in several locations of the image, such as the center, and bottom, are useful for positioning text images. While. HTML features such as using Figure and Figcaption are further useful in maintaining the SEO and overall structure of the webpage.
However, it is essential to test the responsiveness of the image after positioning text over it. There’s no way easier than BrowserStack’s Free Responsive Checker Tool, which allows testing the webpage on multiple real devices of choice spanning across different screen sizes and resolutions.
Try Responsive Checker Tool for Free
ncG1vNJzZmivp6x7o77OsKqeqqOprqS3jZympmeXqralsY6ppqyhpJ68r3nTnq%2BtZZ%2BrsrN5yKaYoJ1dqsCqusZmmqyr