Add background image to Jumbotron in Bootstrap in HTML,PHP example Tutorial

How to set image as background inside whole Jumbotron in HTML,PHP full step by step tutorial.

In this tutorial we are using Bootstrap ‘s Jumbotron class with background image. Because by default there is only background color set on Jumbotron but after modifying a little bit of our DIV and adding a custom style inside DIV we can insert image as background inside Jumbotron. Image which we are going to set as Jumbotron background will automatically adept its size and also it makes the background image to fully responsive. So here is the complete step by step tutorial for Add background image to Jumbotron in Bootstrap in HTML,PHP example Tutorial.

https://www.android-examples.com/demo/heading-tag.html

How to Add background image to Jumbotron in Bootstrap in HTML,PHP example Tutorial.

Code for background-image.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jumbotron</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="jumbotron" style="background-image: url(https://www.android-examples.com/wp-content/uploads/2016/03/demo_bg_image.jpg); background-size: 100% 100%;">

 <h1>Jumbotron With Background</h1> 
 
 <p>Here is the Jumbotron with background image.</p> 
 
 </div>
 
</div>

</body>
</html>

Screenshot:

Add background image to Jumbotron in Bootstrap in HTML,PHP example Tutorial