Image Overlay On Text

Look Demo

Add an image overlay effect to any text. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Image Overlay Effect //

h1 {
  background: url(IMAGE-URL-HERE) no-repeat center center;
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }

Customize

Change h1 to the header you are targeting - this can either be h1, h2, or h3. Next, replace the IMAGE-URL-HERE text with your own image url.

If you’d like to target a specific block, add the block ID before h1. Download Squarespace Collection/Block Identifier to help make finding and copying block IDs easier.

License

This plugin comes with an Unlimited Use License. View License Terms