Image Overlay On Text

• Look Demo
• How To Install
• Customize
• License

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

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

Copy Code

// 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;
  }

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.

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