Image Overlay On Text


Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Image Overlay Effect //

h1 {
 color: #fff;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent),
    url( repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;

Step Three

Change h1 to the header you are targeting - this can either be h1, h2, or h3. Next, replace with your image’s 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.

Save and refresh the page. 👍

Moov Labs