title: Bootstrap 4 - background image for <body> tag
body: <p>I'm new to Bootstrap and I'm using Bootstrap Studio to learn how to code.I have added a body background image and set the navbar background to none and that works fine. </p>
  
  <p>I am facing a problem regarding the next components added, in this case a jumbotron and a button. Each one of these two components are going over the image set in the <code>&lt;body&gt;</code> which is logical. What I want is to create a navbar transparent and to have a background image, but only for the jumbotron and the navbar. How can I achieve this? </p>
  
  <p>Thanks and sorry for my english.</p>
  
  <p><strong>Here is the HTML code</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;div class="jumbotron" id="first-jumbo"&gt;
              &lt;h1&gt;Heading text&lt;/h1&gt;
              &lt;p&gt;Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-default" role="button" href="#"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;&lt;a href="#" class="navbar-brand navbar-link"&gt;brand &lt;/a&gt;
              &lt;button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="navcol-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;first item&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#"&gt;second item&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                           &lt;ul class="dropdown-menu" role="menu"&gt;
                               &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                               &lt;li class="divider"&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                               &lt;li class="divider"&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-default" type="button"&gt;Button&lt;/button&gt;
      &lt;script src="assets/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Here is the CSS code</strong></p>
  
  <pre><code>body {
    background:url(../../assets/img/pexels-photo-294560.jpeg) no-repeat;
    padding-top:100px;
    background-size:cover;
  }
  
  .navbar {
    background:none;
  }
  
  #first-jumbo {
    text-align:center;
  }
  </code></pre>
  
  <p>Here is a <a href="http://magic-sun-0850.bss.design/" rel="noreferrer">page preview</a></p>