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>
Join Stack Overflow to learn, share knowledge, and build your career.
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>
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);
}
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
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.
The <img>
element is empty — it doesn't have an end tag.
If the image is a background image, use CSS. If it is a content image, then set position: relative
on a container, then absolutely position the image and/or text within it.
You can try this...
<div class="image">
<img src="" alt="" />
<h2>Text you want to display over the image</h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
position: absolute;
does the trick, but a killer for responsiveness
– deanwilliammills
May 19 '18 at 12:07
Using absolute
as position
is not responsive + mobile friendly. I would suggest using a div
with a background-image
and then placing text in the div
will place text over the image. Depending on your html, you might need to use height
with vh
value
img
is a self-closing tag, as so:<img src="example.jpg" alt="Alt text">
(equivalently, in XHTML:<img src="example.jpg" alt="Alt text" />
). – kevinji Apr 22 '11 at 18:28