Translucent Background Image

Opaque text on semi-translucent image

Translucent Background Image

In CC's responsive site builders a background image can be made translucent by changing the opacity. A problem that arises by doing so is, that any element placed inside the same div, upon that background, will inherit the opacity, and text will more or less disappear into the background and be hard to read.

Therefore there is another container placed inside the same parent div as the one with the image background. This second div has been given an absolute position and a transparent background, and and then the text has been popped on top of that again. That solves the problem, and it works as far back as in IE9.

Placeholder Picture

Download this component

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