Translucent Image and Text Background

Translucent text background

With text and image remaining opaque.

Make text readable if placed on an image

You need a container with a background image. The container have 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 the Translucent Text Background component

Placeholder Picture

Download the Translucent Image Background component