Bootstrap Jumbotron Background image Opacity and width and height? - html

Question

I have the following requirements:
I want the background image of the jumbotron to fit the width of the page and the height to be scaled proportionally
I want the opacity of the jumbotron's background image (only) to be set to a specific value.
My background image is quite large: http://imgur.com/a/qYRGJ
I have tried the following trick recommended somewhere online:
<section class="jumbotron">
<div class="img"></div>
<div class="container">
<div class="row">
<h1 class="display-3">Test</h1>
<p class="lead">Test</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</section>
This is my CSS:
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;
}
Currently, this breaks my code. Creating another after this causes the section to be displayed on the background image.
Can someone recommend a solution that satisfies my requirements?

Answer 1

Works fine if you use this CSS. Overall though, it would be better to edit that photo in Photoshop and set the opacity there rather than doing it in the browser.
<style>
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("http://i.imgur.com/eFMDsVA.jpg");
z-index: -1;
}
section .container {
background-color: transparent;
}
section .container .row {
padding: 1.5em;
}
.jumbotron {
background-color: gray}
</style>