Jump to content

SVG Background Images

Recommended Posts

  • 8 months later...

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:

    .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. 


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.