I stumbled upon this while looking for answers. Here's how I made it work!
For background I'm using the Burke theme which is part of the Brine family of templates with parallax scrolling. I wanted to upload a custom image, but doing so in .png really degraded the quality.
Here's how to use a custom image as a banner background:
Create a text block and hyperlink some text
In the hyperlink section, click "File" and upload your .SVG file
Save and open the hyperlink in a new tab -- this will give you the hosted URL of the .SVG image
Then, in Design > Custom CSS use:
section#your-page-title-here
.Index-page-content {
background-image: url(your-image-link.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
*Note, you might have to swap out .Index-page-content to reflect the id of the main page the banner is on.
Major thanks to @tuanphan's for their website here: https://beaverhero.com/https://beaverhero.com/tag/brine-family/. Not sure I would have figured it out otherwise!
If you're seeing this, let me know if I can clarify anything above.