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'.
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'.
Download this component (displayed)
Download the translucent image component