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>
</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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...