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)
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?
Using image as backgrounds sometimes would not show some part of the image, so in that case overlaying text is the solution.
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...
position absolute is not the best way :\