App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide How to position Text Over an Image using CSS

How to position Text Over an Image using CSS

By Mohit Joshi, Community Contributor -

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.

Image on which Text is positioned using CSS

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.

Image after positioning Text over it using CSS

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. 

Responsive Image on which text is positioned using css

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.

Responsive Image after positioning Text over it using CSS

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.

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.

Test the Responsiveness of Images with Text positioned over itStep 2: To check responsiveness, click Check.

Step 3: The user can check how the site appears on a certain device after choosing it.

Select Devices to Test the Responsiveness of Images with Text positioned over 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

 

Tags
Responsive Website Testing

Featured Articles

Fixing Browser Compatibility Issues with CSS Opacity & RGBA

CSS techniques for Improved Cross Browser Compatibility

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.