Bootstrap Jumbotron Background image Opacity and width and height?
<p>I have the following requirements: </p>

<ol>
<li>I want the background image of the jumbotron to fit the width of the page and the height to be scaled proportionally</li>
<li>I want the opacity of the jumbotron's background image (only) to be set to a specific value. </li>
</ol>

<p>My background image is quite large: <a href="http://imgur.com/a/qYRGJ" rel="nofollow">http://imgur.com/a/qYRGJ</a></p>

<p>I have tried the following trick recommended somewhere online: </p>

<pre><code>&lt;section class="jumbotron"&gt;
  &lt;div class="img"&gt;&lt;/div&gt;

  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;h1 class="display-3"&gt;Test&lt;/h1&gt;
      &lt;p class="lead"&gt;Test&lt;/p&gt;
      &lt;p class="lead"&gt;
        &lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Learn more&lt;/a&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>This is my CSS:</p>

<pre><code>section {
  position: relative;
  background-color: transparent !important;
}

section .img {
  position: absolute;
  left:0; top:0;
  background-size: cover;
  min-height: 768px;
  width: 100%;

  opacity: 0.45;
  background-image: url("1.jpg");
  z-index: -1;
}

section .container {
  background-color: transparent;
}

section .container .row {
  background-color: gray;
  padding: 1.5em;
}
</code></pre>

<p>Currently, this breaks my code. Creating another  after this causes the section to be displayed on the background image. </p>

<p>Can someone recommend a solution that satisfies my requirements? </p>