Full Width Image With Overlay?
Chad Criswell
I currently have a section with an image background (1920x1022) that goes full width and looks great but I want to put text in front of it. When I instead try to use the image overlay element I cannot figure out how to make it go full width. No matter what I do it will not fill the entire width even though the image is more than large enough to span that distance (as it does when used as a section background). How can I make an image overlay element stretch to fill the full width?
Ziaul Kabir
Accepted AnswerHello Chad,
Thanks for reaching out to us.
Steps to Achieve a Full-Width Image with Overlay in SP Page Builder:
- Adjust Row Settings:
• Open Row Settings for your section.
• Set Column Alignment to Center.
• Enable the Fluid Row option to ensure full width.
2. Set Background Image with Overlay:
• Use the Background Image option in the Row Settings.
• Add an Overlay Color with Opacity to achieve the desired effect.
3. Ensure Proper Text Placement:
• Add a Text Block element within the row.
• Set Alignment to Center to position the text correctly.
4. Optimize Height & Width:
• Set the Window Height to 100 for full-screen display.
• Set the Width to 100% to ensure it spans the full width.This should give you the desired result.
Thanks
Chad Criswell
Accepted AnswerI was able to follow everything down to your last section but it seems as though I am getting off track somewhere in the process. Where are Window height and width at in the text block settings?
Also, is there no way to get the animated text as you have in the image overlay element? The instructions seem to infer to use the background image in the row settings but I think you might mean image overlay?
Please watch the video in the hidden section to see where I am going wrong. If you could clear up my confusion and clarify the instructions I would be very grateful.
Chad Criswell
Accepted AnswerThank you. That helped a lot. One last thing, can you tell me why I can't seem to be able to control the text color/size when I add the text block? I can change the size and color of the lorem ipsum text but as soon as I type in my own text I can no longer control the text color or size. I also only seems to be able to control the text color through the column element. See video below. The most important part is around 2:20 where as soon as I put in my own text I can no longer control anything with the font.