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

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