Image replacement

Bootstrap image replacement

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

You can swap text for background images with the image replacement class.

To do this, just utilize the .text-hide class or mixin to help replace an element’s text content with a background image.

Show code Edit in sandbox

HTML
CSS

        
            

        <h2 class="h1 text-hide">Custom heading</h2>

        
            

        // Usage as a mixin .heading { @include text-hide; }

Use the .text-hide class to maintain the accessibility and SEO benefits of heading tags, but also wish to utilize a background-image instead of text.

MDBootstrap

Show code Edit in sandbox

HTML

        
            

        <h2 class="h1 text-hide"
          style="background-image: url('https://mdbootstrap.com/img/logo/mdb-transparent-250px.webp'); width: 250px; height: 90px;">
          MDBootstrap</h2>

Introduction