[Resolved] hero background image padding

Home Forums Support hero background image padding

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #889013


    I’ve set an SVG as a custom background image in my page hero.
    The only thing I can’t figure out is how to control the padding left and right of the background image because I don’t want it to take up the full width of the page.

    If possible I would also like to know if the background image can be set to always stay below the “get updates” button on my website, so it never overlaps with the content above.

    Thank you for your time πŸ™‚

    Lead Developer
    Lead Developer

    Hi there,

    It’s hard to control background images sometimes (there is no padding for them etc..).

    However, something like this might help?:

    .page-hero {
        background-size: 90%;
        background-position: center bottom;

    Let me know πŸ™‚


    Yup, the background size did the trick.

    About the second part of my question.
    I think the best solution is to manage it with proper breakpoints and different background sizes so the button won’t overlap with the background image when viewed on different screen sizes.
    What is your thought on this?

    Thanks for the help.

    Lead Developer
    Lead Developer

    That’s likely your best bet.

    No problem! πŸ™‚

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