How to add text on background image in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to add text on background image in bootstrap.

To put text to the background image, put the background image URL in css and Insert text in <p> of the HTML tag.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

Step 3: Includes css in html page

Here we are using in css class to add on background image in bootstrap .

       body {
            background: url(image/autumn-poolside.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        .maintxt {
            position: relative;
        }

        .maintxt>img,
        .overlay-text {
            position: absolute;
        }

        .overlay-text {
            padding: 150px 50px;
            color: black;
        }

Step 4: Define its class name

After that, create the text in the center with a class name .col-xs-12 col-sm-6 col-md-8 col-centered.

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
                <div class="maintxt">
                    <span class="overlay-text">"On the other hand, we denounce with righteous indignation and dislike
                        men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by
                        desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame
                        belongs to those who fail in their duty through weakness of will, which is the same as saying
                        through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.
                        In a free hour, when our power of choice is untrammelled and when nothing prevents our being
                        able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in
                        certain circumstances and owing to the claims of duty or the obligations of business it will
                        frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man
                        therefore always holds in these matters to this principle of selection: he rejects pleasures to
                        secure other greater pleasures, or else he endures pains to avoid worse pains."
                    </span>
                </div>
            </div>
        </div>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <style>
        body {
            background: url(image/autumn-poolside.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        .maintxt {
            position: relative;
        }

        .maintxt>img,
        .overlay-text {
            position: absolute;
        }

        .overlay-text {
            padding: 150px 50px;
            color: black;
        }
    </style>
    <title>Bootstrap</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
                <div class="maintxt">
                    <span class="overlay-text">"On the other hand, we denounce with righteous indignation and dislike
                        men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by
                        desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame
                        belongs to those who fail in their duty through weakness of will, which is the same as saying
                        through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.
                        In a free hour, when our power of choice is untrammelled and when nothing prevents our being
                        able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in
                        certain circumstances and owing to the claims of duty or the obligations of business it will
                        frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man
                        therefore always holds in these matters to this principle of selection: he rejects pleasures to
                        secure other greater pleasures, or else he endures pains to avoid worse pains."
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>
</body>
</html>

Check the output of the above code example.

Bootstrap, Image, Text

All the best 👍

Follow me on Twitter