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 Set navbar active class with Bootstrap and AngularJS ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
- 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
- Convert an image into grayscale image using HTML/CSS
- ReactJS | Hot Module Replacement
- How to find the parent class name with known class in jQuery ?
- How to override the CSS properties of a class using another CSS class ?
- What's new in Bootstrap v4.3 ?
- Bootstrap 4 | Badges
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.