Text Image

Type: Mixin

@include text-image();

* You can call mixins with or without gls- namespace (e.g. @include gls-text-image();).

Text Image Sass mixin helps you to clip the background image of a selected element to the shape of its foreground text.

Github Source Code

Arguments

Name	Type	Description
`$image`	`string (quoted)`	The URL of a clipping image.

* Important: Note that the URL of the image must be passed in quotation marks.

Examples

Simply call the mixin in the selector and pass the URL of an image.

<h2 class="element">Text Image is Awesome!</h2>

.element{
  @include text-image("/images/backgrounds/05.jpg");
}

//CSS Output
.element {
  background-image: url("/images/backgrounds/05.jpg");
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Text Image is Awesome!

The $image parameter is optional. This is very useful especially in the cases of loading images from the front face.

<h2 class="element" style="background-image: url(https://i.picsum.photos/id/225/1500/979.jpg)">Text Image is Awesome!</h2>

.element{
  @include text-image;
}

//CSS Output
.element {
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}