can jumbotron background image be width="100%"?

Hi you helpful people you

I am trying to create a responsive image with text over it, where the text shows separately as the size gets smaller.

I am using a Jumbotron because I can't think of any other way to do it, but my problem is that the picture won't fill the screen like it does if I just had the picture alone with width set at 100%:

Is there any way besides the jumbotron to achieve this?

My code on the jumbotron is:

  <div class="jumbotron">

    <p><br /><br /><br /><br /></p>

    <h1>Kairos Prison Ministry</h1>

    <p><br /><br /><br /><br /><br /><br />The mission of Kairos Prison Ministry is to share the transforming  love and forgiveness of Jesus Christ<br>

to impact the hearts and lives of  incarcerated men, women and youth, as well as their families, <br>

to become loving  and productive citizens of their communities.<br /><br />

    </p>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a><br /><br /></p>

  </div>

and my CSS is:

.jumbotron {

  background-image: url(../images/hands_bars.jpg);

  background-repeat: no-repeat;

  display: block;

  background-size:cover;

  width: 100%;

  padding: 0px;

  margin-bottom: 0px;

  margin-top: 0px;

  background-color: #3458B8;

}

.jumbotron .container {

  width: 100%;

}

Thanks as always for your help!