Gif Hintergrund für einen Text
In diesem Blogpost schauen wir uns an, wie wir ein Video als Hintergrund für einen Text in Squarespace verwenden können.
Wichtig ist zuerst, den Website Abschnitt herauszufinden, in welchem wir den Effekt durchführen wollen. Wie man ganz einfach die Section-Id eines Abschnitts auf Squarespace findet, findest du in diesem Tutorial:
Zudem musst du herausfinden, was für eine Textart du für die Schrift genommen hast. Die Textart kann für Überschriften die Werte h1,h2,h3,h4 annehmen und für Absätze p.
Nun kannst du folgenden Code in den CSS-Editor von Squarespace einfügen (Diesen findest du unter dem Menu-Punkt Design):
Um den im Bild dargestellten Effekt zu bekommen, musst du nur folgenden Code in das Benutzerdefinierte CSS unter Design einfügen und die Data-Section-ID austauschen (siehe hier).
#block-c437a6e64451d89a3c81 {
h1 {
background: url("<https://media.giphy.com/media/xT9IgzoKnwFNmISR8I/giphy.gif>") !important;
background-size: cover !important;
background-position: center !important;
-webkit-background-clip: text !important;
color: transparent !important;
}
}Ändere die Block-Id in die ID (#block-c437a6e64451d89a3c81) deines Blocks oder deiner Data-Section ab und ändere zudem noch den Textstil (h1) ab, der auf deinen Text zutrifft. Jetzt musst du in dem URL Attribut nur noch den Video-Link von deinem Video einfügen, und schon hast du nachfolgenden Effekt:
