Archived topic
SVG Hero Animation
9 replies · Started by Graham on March 9, 2022
Hello,
I wanted to add a SVG bg to the hero section of one of my pages. I have the animated .svg file. How should I go about doing this?
Hi Graham,
Are you using a block element - page hero to make the hero section?
https://docs.generatepress.com/article/block-element-page-hero/
If so, you can upload the SVG to your media library, then choose it as the background image of your GB container block:
https://docs.generateblocks.com/article/container-overview/#backgrounds
Hi Ying,
Yes, the issue is that the BG or the overall image size is to large: https://dropdeskstage.wpengine.com/services so it gets cut off.
What's the best way to make the svg visibly smaller?
I want the animation to be contained in the hero section. I saw that you can do this via CSS
background-size: contain;
Just dont know where to place this
In GB container's background settings, you can set background size to contain, no CSS is needed:
https://docs.generateblocks.com/article/container-overview/#image-size
In your case, set the background image to the first container is the way to go.
But you might want to make the container width/height ratio to match the SVG's aspect ratio.
Try tweak the top/bottom padding for the first container using % as the unit.
thx it seems to work
Glad to hear that :)
thx
