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'.
Download the Translucent Text Background component
Download the Translucent Image Background component
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'.
Download the Translucent Text Background component
Download the Translucent Image Background component