Changing Jumbotron opacity and make it full width without affecting the font and button

Question

would like to ask how to change Jumbotron opacity and make it full width without affecting the opacity of the font and the button?

.jumbotron-special{
    text-a         


        

Answer 1

See the following fiddle: http://jsfiddle.net/7ak3b0f4/

Basically, have a parent element manage the page flow, make it relative, and create a child element for the background, and one for the content (order matters due to z-index, unless you manually change it). Then, have the children be absolutely positioned, and fill the entire parent.

<div class="jumbotron">
    <div class="bg">
        I'm in the background.
    </div>
    <div class="content">
        <h1>Important stuff!</h1>
        <button>Yup.</button>
    </div>
</div>

and

.jumbotron {
    width: 100%;
    height: 400px;
    position: relative;
}

.jumbotron .bg {
    opacity: 0.10;
    background-color: orange;
    position: absolute;
    width: 100%;
    height: 100%;
 }

.jumbotron .content {
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 2

You can add the background in another element and decrease the opacity only for that element:

.jumbotron-special {
   position: relative;
}
.jumbotron-special:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('header-bg.jpg'); 
    width: 100%;
    height: 100%;
    opacity : 0.3;
    z-index: -1;
}