Bootstrap, header/banner, matching width and positioning to body

Question

I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is http://brilliantzenaudio.com)

In templates/header.php,

<header class="banner" role="banner">
  <div class="container">
    <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
       </div>
    </div>
  </div>
</header>

Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),

.content {
   background:#fff;
   padding-top:2em;
}
.home .content {
   padding-top:0;
}

.main { }
.page-header {
   margin: 10px 0 20px 0;
   background: #222;
   padding: 5px;
   border-radius: 5px;
}
.page-header h1 {
   color:#fff;
   margin:0;
}
.page-header h1:before {
   content:  "\00bb";
}

Solution

Instead of having an image tag inside your div.

You could set the background-image of the div. Try something like this.

CSS

#test {
   background-image: url("/assets/img/brav-banner-2.jpg");
   height: 295px;
   background-size: 100%;
}

HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="test">
</div>

Update

Try setting your image to 100% width instead. It should automatically re size the image

Comments

[Trevor]

This url may be a useful reference for other options besides background-size stackoverflow.com/questions/1150163/…

[composerMike]

That gets closer, but there is one problem. Because the height of the <div> is fixed, as I resize the browser window (make it smaller) there starts to open up a gap between the banner and the page content. How do I get a consistent pad between the banner and page content?

[Trevor]

Ahh right, I just went to your page to address the issue but it looks like you already have it solved.

[composerMike]

I realized eventually that I don't want to use bootstrap. So if I don't put things in a div of class "container" then I'll have simpler css behavior. So I'm kind of cheating my original question.