How to create text with gif backgrounds on Squarespace

Adding custom CSS allows you to add extra customisations to your Squarespace website. This blog post will walk you through the process of adding a gif background to a heading as shown below.

Gif Heading

1. Copy and paste the below code snippet into your Design » Custom CSS area.

2. Replace h1 with the heading type you'd like to apply this styling to.

3. Be sure to insert the background url with the url of the gif you'd like to use as a background.

4. To apply it, create a heading with h1 styling and make it bold.

Code Snippet -

h1 strong {

background: url(https://url/image.gif)

background-size: cover;

background-position: center;

--webkit-background-clip: text;

color: transparent; }

Please note that it will apply to all headings in bold of that size on the website.