How to set background - image for whole Bootstrap container-fluid?

Question

I'm trying to replicate Paypal's navbar and section below it for training purposes. I've created one container-fluid and two rows within it. I've set background-image of this container but ... it covers only one of two rows it should, why ?

 .container fluid { width:100%; height:100%; background-image:url('https://www.paypalobjects.com/webstatic/en_GB/mktg/wright/home/homepage-hero-1x.jpg'); 

 <div class="container-fluid"> <div class="row1"> <div class="col-md-2"> <a href="https://www.seeklogo.net/?p=72581" target="_blank"><img id="pp"src="https://www.seeklogo.net/wp-content/uploads/2015/11/paypal-logo-preview-400x400.png" alt="PayPal logo vector" /></a> </div <div class="col-md-4 offset-md-4"> <ul> <li>PERSONAL <i class="fa fa-angle-down" aria-hidden="true"></i></li> <li>BUSINESS <i class="fa fa-angle-down" aria-hidden="true"></i></li> <li>PARTNERS & DEVELOPERS</li> </ul> <button id="login"class="buttons" type="btn">Log in</button> <button id="signup"class="buttons"type="btn">Sign up</button> </div> <div class="row2"> <h1>The simpler, safer way to<br>pay and get paid.</h1> </div> </div> 

https://codepen.io/zeeebra/pen/MvYOwj?editors=1100

Answer 1

You can try to give a fixed image in the background that does not move while scrolling. Try the following code.

.box{
  height: 100vh;
  width: 100%;
  background-size: cover;
  display: table;
  background-attachment: fixed;
  background-image: url(1.jpg);
}

Just replace the image name. I hope this helps!