| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Image replacement | |
| 4 | description: Swap text for background images with the image replacement class. | |
| 5 | group: utilities | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | {% capture callout %} | |
| 10 | ##### Warning | |
| 11 | ||
| 12 | The `text-hide()` class and mixin has been deprecated as of v4.1. It will be removed entirely in v5. | |
| 13 | {% endcapture %} | |
| 14 | {% include callout.html content=callout type="warning" %} | |
| 15 | ||
| 16 | Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. | |
| 17 | ||
| 18 | {% highlight html %} | |
| 19 | <h1 class="text-hide">Custom heading</h1> | |
| 20 | {% endhighlight %} | |
| 21 | ||
| 22 | {% highlight scss %} | |
| 23 | // Usage as a mixin | |
| 24 | .heading { | |
| 25 | @include text-hide; | |
| 26 | } | |
| 27 | {% endhighlight %} | |
| 28 | ||
| 29 | Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text. | |
| 30 | ||
| 31 | <div class="bd-example"> | |
| 32 | <h1 class="text-hide" style="background-image: url('{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1> | |
| 33 | </div> | |
| 34 | ||
| 35 | {% highlight html %} | |
| 36 | <h1 class="text-hide" style="background-image: url('..');">Bootstrap</h1> | |
| 37 | {% endhighlight %} | |
