SVG Background Images

Hi Everyone,

Does Squarespace allow SVG background images? I've been searching but haven't found any useful leads. can anyone help?

Thanks!

Not sure. You can try.

You can also add background svg with CSS. Demo here (just tested, worked.)

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:

1. Create a text block and hyperlink some text
2. In the hyperlink section, click "File" and upload your .SVG file
3. Save and open the hyperlink in a new tab -- this will give you the hosted URL of the .SVG image
4. 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.