Menu
How to put text over images in HTML. Everytime I enter the below code, the text goes under the image.
<img src="example.jpg">Text</img> 
474
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”.
On the Insert tab, in the Text group, click Text Box, click anywhere near the picture, and then type your text. To change the font or style of the text, highlight the text, right-click it, and then select the text formatting you want on the shortcut menu.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element.
Add class=carousel-caption to the HTML tag which contains your text which needs to be positioned over your image !. (And then if you wish add custom css top:xyz% to your . carousel-caption class in css stylesheet to make it align vertically at middle.)
You can create a div with the exact same size as the image.
<div class="imageContainer">Some Text</div> use the css background-image property to show the image
.imageContainer { width:200px; height:200px; background-image: url(locationoftheimage); } more here
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
77
You need to use absolutely-positioned CSS over a relatively-positioned img tag. The article Text Blocks Over Image gives a step-by-step example for placing text over an image.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
