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