bootstrap 3 built in image replacement?

Question

While digging through mixins.less file of bootstrap 3 I found the following:

// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Has anyone been using this? Where do I specify the image that I want to replace the text? Am I right to assume that all this does is to hide text and not replacing it with an image?

Answer 1

Yes, this does not include an image, it only hides text. You will need to do your own image replacement, perhaps in a custom CSS rule:

.my-image-replacement {
  background-image:url('myImage.jpg');
  .text-hide();
}

Answer 2

I use the following for convenience:

.image-replacement( @url, @width, @height ) {
    display: block;
    width: @width;
    height: @height;
    background: url(@url) no-repeat left top;
    .text-hide();
}

.logo {
    .image-replacement( "images/logo.png", 100px, 50px );
}

Note this version is not retina - use bootstrap's .img-retina() from mixins.less instead of the background line above when you're serving hdpi images…