Translucent Image and Text Background

Text on translucent layer

Make text readable if placed on an image

You need a container with a background image. The container has to be positioned relative. Then with absolute positioning pop another container with some text on top of the image, and give the second container a background with reduced opacity.

The other way around is also fairly easy. Again, start with a container, here called ‚Äč.translucent-wrapper, with a relative positioning. Inside it place two containers, the first one with a background image, and reduce the opacity of the image to about 0.25 (or to what you find suitable). The second container is for the text.

Please observe for both these components, which elements have to have relative and absolute positioning. Something with absolute positioning has to be inside a relative 'parent'.

Placeholder Picture

Download this component (displayed)

Placeholder Picture

Download the translucent image component