DEV Community


Posted on • Originally published at Medium

Positioning a text over an Image using CSS / HTML

Starting off we'll use this simple html layout, start by changing the img src to the image you will be using.

and we will also be using this css stylesheet.

Now we have a text in the center of this image.
A text-shadow can sometimes make the text more visible. Another way to make the text more visible is to add a box around your text with a low opacity.
CSS for the box

Wrapping the Image and Divs with this box class

Feel free to ask if you have any questions!

Top comments (5)

bce_merde profile image

is it easier to place text over an image to place on the site or jsut placing the image as bg and then the text on a top layer?

devhammed profile image
Hammed Oyedele

Using image as backgrounds sometimes would not show some part of the image, so in that case overlaying text is the solution.

yevgalis profile image
yevgalis • Edited

It depends on a situation. But in the example above I would've used image as a background for <div class="content">

fosterpcl profile image
Wicked Foster Child • Edited

Hi @drinkmeasap
I tried to follow your suggestions as closely as I could for my website but the text is never inside the image, would somebody please point out what I've done wrong?

kevinhch profile image

position absolute is not the best way :\