Positioning a text over an Image using CSS / HTML

#css #html #webdev #beginners

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)

******* • Sep 5 '19

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?

Hammed Oyedele • Sep 6 '19

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

Wicked Foster Child • Jan 20 '20 • 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?

thepracticaldev.s3.amazonaws.com/i...