[Resolved] Background image in containers with text on top

Home Forums Support [Resolved] Background image in containers with text on top

Home Forums Support Background image in containers with text on top

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1962846
    Sandee

    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!

    #1962850
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1962858
    Sandee

    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!

    #1963047
    David
    Staff
    Customer Support

    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.

    #1963057
    Sandee

    Thank you. Yes, I’m using GB Pro and GP Premium. I thought it might be complex, but I wasn’t quite sure.

    #1963106
    Sandee

    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?

    #1963119
    David
    Staff
    Customer Support

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.