john400 john400 - 4 months ago 15
HTML Question

How to make the image take up whole space?

I am making a website and I want to give an image in the header part.This is my code in the HTML file

<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>We take inspiration from the World's best
touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
provide throughout the year !
</p>
</div>
</div>
</div>
</header>


And I have used this code in the CSS file.

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;

}


Now the problem is that my image is not taking up the entire height and width of the jumbotron as in the image below.
enter image description here

I want it to take up the entire space.I have used images of different sizes but it's of no use.None is taking the entire space of the window.
So any help is appreciated.Thanks in advance.

N.B.: I have read other questions of images not taking the entire width in stack overflow but couldn't get it working.

Answer

Note: I'm not entirely sure that you want to apply the class (or could be an ID) to the header as opposed to one of the lesser divs. Might depend on what else you've got going.

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

Seeing the other answers: It will also depend on characteristics of your image and what kind of display you prefer. Cover != 100% x 100% != Contain. See CSS3 background-size Property "Try-It".