image replacement

Include text in the markup but replace it with an image.

use-name: scut-image-replace
type: mixin and placeholder (same)

Be warned: you might run into occasional bugs with this method of image-replacement unless you've also set a width on your element.

example

HTML

<p>The following image is replacing text:</p><div class="eg-image-replace">This text has been replaced.</div>

SCSS

.eg-image-replace {
  @include scut-image-replace;
  // or @extend %scut-image-replace;
  background: url("//placehold.it/200x200") no-repeat;
  background-size: contain;
  height: 8em;
}

compiled CSS

.eg-image-replace {
  text-indent: 102%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  background: url("//placehold.it/200x200") no-repeat;
  background-size: contain;
  height: 8em;
}

Result

The following image is replacing text:

This text has been replaced.