Jump to content

custom font - cut out image - broken code help please!

Go to solution Solved by DavidStewart,

Recommended Posts

Posted (edited)

Hi I have input some custom code to create a cut out text effect with an image behind. It looks great but on certain places the text is cut off at the bottom. Is anyone able to see why the overflow:visable isn't working? 🙂 

Thanks in advance! 

https://polygon-reindeer-hnj3.squarespace.com/home5

h1 { color: #FFFFFF;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent), 
url(https://static1.squarespace.com/static/6630bf9dab885d6b49e527f0/t/6633f2dba9ed5130c98bac2a/1714680542864/jean-luc-benazet-kcKBRFSis18-unsplash.jpg) repeat;
background: -o-linear-gradient(transparent, transparent);   
-webkit-background-clip: text;
overflow: visible!important;}

 

Screenshot 2024-07-09 at 14.45.11.png

Screenshot 2024-07-09 at 14.45.18.png

Edited by MillyBanks
Link to comment
  • Solution

Please use this updated code. It will fix the issue : 

h1 { color: #FFFFFF;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent), 
url(https://static1.squarespace.com/static/6630bf9dab885d6b49e527f0/t/6633f2dba9ed5130c98bac2a/1714680542864/jean-luc-benazet-kcKBRFSis18-unsplash.jpg) repeat;
background: -o-linear-gradient(transparent, transparent);   
-webkit-background-clip: text;
overflow: visible!important;line-height:1.1em !important;}

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.