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.

    

        I'm in the background.
    
    

        
Important stuff!
        Yup.
    

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%;
}