Gerillass: Text Image Sass Mixin

Text Image

Type: Mixin

@include text-image();

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

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

Arguments

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

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

Examples

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

HTML

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

Sass

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

CSS

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

Result

The $image argument is optional. This is especially useful when the image is loaded from the markup, as in the example below.