Skip to content
Related Articles

Related Articles

Image Replacement in Bootstrap using text-hide Class
  • Last Updated : 12 Feb, 2019

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.

Syntax:

<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.

Example:




<html>
<head>
    <!-- Link Bootstrap CSS and JS -->
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
    <h1 class="text-hide" 
               background-repeat: no-repeat; 
               width: 500px; height: 500px; ">
        GeeksforGeeks
    </h1>
</body>
</html>

Output:

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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :