Translucent Text Background

Text on translucent layer

Translucent Text Background

This is more or less the opposite of the component called 'Translucent background image'. Especially, if you have a very detailed and colourful background image, it may be best to give the text a neutral-coloured, translucent background, otherwise the it will be hard to read.

You just need a container with a background image, and some text element (E.g. a 'hero' element) on top of it. The container has to be positioned relative, and the text/hero has to be given an absolute position.

Placeholder Picture

Download this component

This component can be used both for 'mobile-up' and 'desktop-down'.