Image Replacement Is Bootstrap Using Text Hide Class

admin_img Posted By Bajarangi soft , Posted On 13-10-2020

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.

Image Replacement Is Bootstrap

.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 Propert.
Example-1
<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('logo.jpg');
         background-repeat: no-repeat;
         width: 500px; height: 500px; ">
    BAJARANGI SOFT
</h1>
</body>
</html>
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.

Related Post