DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

drinkmeasap
drinkmeasap

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.
https://unsplash.com/photos/qxT5_usxqsE
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.
https://unsplash.com/photos/qxT5_usxqsE
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)

Collapse
 
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?

Collapse
 
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.

Collapse
 
yevgalis profile image
yevgalis • Edited on

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

Collapse
 
fosterpcl profile image
Wicked Foster Child • Edited on

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...

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

Collapse
 
kevinhch profile image
Kevin

position absolute is not the best way :\

Create an Account!

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.