How to add text on background image in bootstrap?
May 30, 2022Hi 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.
All the best 👍
