Creating a website and looking to incorporate an image in the header section. Here is the HTML code:
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8 col-md-12">
<h1>Tourister</h1>
<p style="padding:40px"></p>
<p>Taking inspiration from top touring experiences around the globe, we offer unique travel opportunities and unbeatable deals all year round!</p>
</div>
</div>
</div>
</header>
The CSS code used for styling:
.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
}
However, the issue arises when the image does not cover the entire height and width of the jumbotron as desired. I have tried images of different sizes without success. Any assistance on resolving this problem would be greatly appreciated. Thank you.
N.B.: Sought solutions on similar image display issues on Stack Overflow but failed to achieve the desired outcome.