How to add text on-top of an image

I am slightly surprised that I haven’t done a post on this, yet.  My intention with this blog post is to simply show how to layer text on-top of an image.

Let’s start with a fairly basic example.

See the Pen
Putting text over images: Part 1
by Joe Steinbring (@steinbring)
on CodePen.

In the above codepen, we have a container that is positioned relatively, an image that is set to a width of 100%, and a “text block” div that is positioned absolutely.  The text is aligned 20px from the right and 20px from the bottom.  So, what does it look like if we want to move the text to the left?

See the Pen
Putting text over images: Part 1.5
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, it is just a 1-line change.  Easy peasy.  So, what will it look like if we dramatically increase the amount of text?

See the Pen
Putting text over images: Part 2
by Joe Steinbring (@steinbring)
on CodePen.

I don’t know if I can recommend doing so, but you end up with the text block pretty effectively covering the image.  You can solve the problem by setting the width of the text block to something like 80%.

See the Pen
Putting text over images: Part 2.1
by Joe Steinbring (@steinbring)
on CodePen.

This ensures that the text block won’t fill the remainder of the container but it still blocks a lot of the image.  Let’s see if we can improve it by tweaking the opacity of the text block, slightly.

See the Pen
Putting text over images: Part 2.2
by Joe Steinbring (@steinbring)
on CodePen.

Now, the text block is 10% see-through and that is a little better.  Have a suggestion of where to take it from here?  Feel free to drop a comment, below.

Leave a Reply

Your email address will not be published. Required fields are marked *