Archived topic
Background image in containers with text on top
6 replies · Started by Sandee on October 13, 2021
Hi,
I would like to use an image that contains a shape on the bottom in my home hero area, and I can't figure out the best way to do it. When I try with margins and padding, it makes things so off on the mobile views that I can't fix them right. I don't know if I need to do this in a different way -- I need to get use a round image with a shape on the bottom of the container or section, and I need to be able to center some text on one side of the container.
I hope my question makes sense.
Thank you!
Hi Sandee,
I'm not sure I understand how you want it to be laid out.
Can you provide a mockup image of how you want things to appear?
Perhaps you're trying to make it look like this? https://share.getcloudapp.com/v1ujvY2E
Let us know.
Hi,
I do have a page mockup; my apologies. I know I didn't explain it very well. I have added a link to the page mockup in Private Information.
Thank you!
Hi there,
nice design - but i can see that would be complicated to handle the responsive behaviour. First question is are you using GenerateBlocks Pro ? As that has more Advanced Backgrounds and the an Asset Library for uploading your own shapes.
Thank you. Yes, I’m using GB Pro and GP Premium. I thought it might be complex, but I wasn’t quite sure.
I've tried something else that seems to work okay on desktop with the exception of the bottom portion of the top container image. Can you think of a setting that might work for it?
Its definitely a tricky one.
With the current layout you have ie. the background is a full image, you can use the Advanced Background option in GB:
https://docs.generateblocks.com/article/advanced-backgrounds/
This will allow you to add a different background image, and set different size, positioning for the 3 device sizes.
An alternative method to help with responsive controls would be to break the layout down into layers.
1. Save a PNG image file of just the round image ( no blue background ). Then you can add that as a Background Image to the Container, and set its Background Color to Blue.
2. Use a custom Shape on the bottom of the Container Block, in GB Pro you can add your own shapes to the Asset Library:
https://docs.generateblocks.com/article/asset-library/
3. You can still keep the current Grid Block for positioning your text to the side.
This way you can resize and re-position the Round Image using Advanced Backgrounds, and not have to worry about the Blue background causing issues.
