Table of Contents
Images on a web page can sometimes have text added to them. Captions can be made out of how To Position Text Over an Image. You can’t put text on top of an image with only HTML elements. We need to use CSS properties for this.
Web developers make websites that look good so that users will be more interested and happy. The placement of text over an image is one way that developers add a visual element to a website. Keeping responsiveness in mind, it’s important to make sure the text stays the same even if the image resizes itself because it’s responsive.
How To Position Text Over an Image
When creating a photo gallery or something like that you might need to place some caption text or description over the image. You can use the CSS positioning methods in combination with the margin property to position or place the text over an image (i.e. the element).
Top left corner
The first position of the text where we are going to set is the top left corner of the image. Use the following code snippet.
CSS: We set the position of the first div element to “relative” so that we can set the position of the second div element to “absolute.” The text that will go on the image has been given a size, weight, style, and color. The top and left properties have been used to put the text in the top left corner.
Bottom left corner
For the purpose of adding a text on the bottom left corner of the image use the code mentioned below.
CSS: The rest of the code is the same, however, to position the text on the bottom left corner we have set the bottom property to 3%, and left property to 8%. You can change the values of these properties to understand how these work.
Center
Similarly, to place your text in the center position, consider the below-mentioned example. For the purpose of adjusting the text on the center position of the image we have set the top property and left property to 40%.
Top right corner
What we have simply done to place the text on the top right corner is that we have set top property to 2%, and right property to 10%. This is not a hard and fast rule, therefore, you can change these values according to your desire.
Bottom right corner
As you can see that the rest of the code is the same as in previous examples with only difference that to place the text on the bottom right corner we have used the bottom property and the right property.
FAQ
How do I change the position of text in a picture?
With the CSS position property, you can set where text goes over an image. You can do this by putting the image and text in a “div” in HTML. Then, make div’s position “relative” and text’s position “absolute.” The absolute elements are placed based on where their parent element is (div).
How do I position text over an image responsive?
You can put text on an image by using the CSS position property. To do this, add position:absolute to the text and position:relative to the image. Put both of them inside a div> element. We can also use the top, bottom, left, and right properties to put text in a certain place on the image.
How do I specify text position in CSS?
- h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; …
- Align the last line of text in three <p> elements: p.a { text-align-last: right; } p.b { text-align-last: center; } p.c { …
- Set the vertical alignment of an image in a text: img.a { vertical-align: baseline; } img.b { vertical-align: text-top; }