[Resolved] Simple page section with background image & bottom aligned button

[Teresa]

I need to create a section for a home page I’m working on that has a full-width image in the background and a single button that’s centered and bottom aligned within that section. It should work/look basically the same on desktop and mobile.

I’ve tried the container and grid blocks, but I must not be adjusting the settings correctly because I can’t seem to make bottom vertical alignment work.

I’ve also looked at directly using Unsemantic since it’s built in to GP, but can’t find documentation or an example showing bottom alignment.

I am using GP Premium, GenerateBlocks and am OK with using HTML/CSS if that’s the best way to pull this off. Thanks for any assistance you can provide.

[Tom]

Hi there,

If you’re using GenerateBlocks, try this:

1. Add a Container Block with your background images etc..
2. Give the container block lots of top padding, but leave the bottom padding empty (or only add a little).
3. Set the text alignment to center in the Container block
4. Add your button block to the container.

That should do the trick 🙂

[Teresa]

Thank you for this, Tom.

Your solution worked to set the button at the bottom. But once I did that the section just felt like it needed something more.

I wound up sticking the button inside another container, along with a headline, and also setting a background so there’d be enough contrast given the image below it.

All that kind of messed up the responsiveness of the image. Like, neither cover nor contain worked well with the container block inside. It’s a horizontal family photo, so definitely not ideal on mobile.

Then I realized that I could use percentages in the background position settings. It means that some people are cut out of the image, but since the site is about an individual and we can squeeze in a couple family members around him, it should work.

If not, the client can get me a vertical photo and I can show/hide sections based on mobile/desktop. I don’t rely on that a lot, but it’s sure nice to have that option in GP 🙂

[Tom]

Awesome, I’m glad you got something working! 🙂

[Author]

Posts