Image Replacement in Bootstrap using text-hide Class
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 rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></ script > < link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" > </ head > < body > < h1 class = "text-hide" style="background-image: url('https://media.w3wiki.net/wp-content/cdn-uploads/w3wikiLogoHeader.png'); background-repeat: no-repeat; width: 500px; height: 500px; "> w3wiki </ 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.