Linear Mask with text

[JenniferS]

Hi, I am trying to create this effect:

where there is a background image, and a dark mask coming up from the bottom with white text on top. I have read the documentation, gone through all the forum posts, etc. Can you explain like I am 5 years old? I want an image covering an entire section with a dark gradient effect starting at the bottom with white text on top. I appreciate any help you can provide.

[ruenel]

Hello @JenniferS,

Thanks for writing in! The one in your screenshot is from an Archive layout template. You can replicate that by having this structure if you want this for your blog index:

Section
   Row
      Column
         Grid - has a dark background color
            Cell - apply Linear Mask here, https://theme.co/docs/effects-module#mask-linear)
               Image

The Cell element has the Linear Mask effect with the following settings:

The Final result is:

Even if you do not have the same element structure, you can apply the Linear Mask in the element that contains the Image element. Just make sure to set a background color for the parent container which in the example above is the Grid.

Best Regards.

[JenniferS]

Thanks for your reply. It’s just a page, not a post archive, so the structure is different.
What I want is a section where the image fills the entire section (I had been trying to use an image background for the section but that’s not working well). So in a structure that is:
Section > Row > Column > Text and the text is visible over the masked part of the image and the mask is dark (like the example I gave), in what element is the image placed? And is it possible to use a background image in this way, or do I need to place an image element in the row or column and have it cover the entire section?

[ruenel]

Hello Jennifer,

Thanks for the updates. You will need to add a DIV element like this structure:

Section [has dark background color]
   DIV [needs to be with the following element settings below]

   Row
      Column

The DIV element will have the following:

• Position as “Absolute”
• a 100% width and height
• must have the background image
• Apply the Linear Mask

If you are having trouble implementing the above suggestions, please provide us with your WP details so we can log in and see what is wrong in your set up. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[JenniferS]

Thank you for the explanation, I was able to get it to work!

[marc_a]

Hey Jennifer,

You’re most welcome!