[Resolved] hero background image padding

[Bas]

Hi,

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 🙂

[Tom]

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 🙂

[Bas]

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.

[Tom]

That’s likely your best bet.

No problem! 🙂

[Author]

Posts