Hello guys! I am trying to add text with a background color in an image like in the example. I am using z index attribution, but so far I only get the text but not the background color above the image. Any idea why?
You can use CSS pseudo elements to do that. Some examples here to give you some ideas on how you achieve it… (scroll down on the page for the same effect you’re after).
trying but the background its gone! Don’t want to add the image as background!
Just add your images to the page in a 3 column bloc. Add your text or heading brics immediately under the images. Create a custom class for the text boxes. Set the background colour, padding and text colour in the custom class. Select each text block and remove the margin. This will force the text box to sit on the bottom edge of the image. Here is an example:
This is a better and cleaner option if you are using a solid background colour in your text boxes, as in your example.
I want to set the opacity at 95% on the background so you can see the image under.
In that case, you have two options depending if you want the same or different layouts for different devices. If you are having different layouts for each breakpoint, create the three text boxes in a new 3 column bloc under the image bloc. Follow the instructions above for styling the text boxes and add the 95% opacity as part of the custom class. Be sure to set the padding to none on both blocs and that the margin for images and text is set to “X”.
Select the Row containing the text boxes from the layer tree on the left and create another custom class. In this class. create a negative top margin so that the text sits over your images. In the example below, I set the opacity of the background colour to 70% so you can see the effect better in the screenshot.!
If you want to create these for multiple breakpoints (the same image and text overlays), you should add a div container under each image within the first bloc (don’t use a second bloc at all). Add your text boxes inside the containers and style with your custom class. Then select the div container and create a class to apply negative margin so that the text box sits on top of the images. Apply this same class to the other div containers. This option will transfer automatically to the smaller breakpoints as shown below:
1 Like
Awesome! Thanks a lot! my mistake was I was adding the text under the image without the row 
Ah figure it out 