Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image.
<element class = "text-hide" style = "background-image: url('Specify URL of image here');"> </element>
In the above syntax, the text-hide class is used to first hide the text of the element and a background image is added to the element using the CSS background-image property.
Note: This class also helps in improving the SEO of a website, as using this class we can add images to the website using heading tags, and use of heading tags is found to be good for a Webpage’s SEO.
- Why card images use data-src (not src) for image in Bootstrap 4 ?
- How to place the image above the slider in mobile view in bootstrap?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- Bootstrap | figure class with Examples
- How to use links on card-img-overlay class in Bootstrap 4 ?
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to add active class on click event in custom list group in Bootstrap 4 ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- ReactJS | Hot Module Replacement
- Advantages and Disadvantages of various Page Replacement algorithms
- Convert an image into grayscale image using HTML/CSS
- How to hide “Image not found” icon when source image is not found?
- How to find the parent class name with known class in jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.