title: How do I get my image header to resize? It's cut off on mobile but looks fine on desktop
body: <p>I'm looking for some CSS help. I am working on my church's website, and I am trying to get the mobile version of my supposedly responsive theme to resize header images. Right now the header image doesn't seem to resize, or at least not completely. </p>
  
  <p>Website: <a href="http://www.rochestertrinity.com/kids.html" rel="nofollow">http://www.rochestertrinity.com/kids.html</a></p>
  
  <p>What I'm hoping to get is to have the header image scale to the exact width of whatever the display size is. So things would look essentially the same on desktop, but on mobile the user would see the entire header image. I've attached a mock up image of what I see now and what I'd like to see.</p>
  
  <p><a href="http://i.stack.imgur.com/SgokC.jpg" rel="nofollow">image of what I see vs what I'd like</a></p>
  
  <p>I'm not a CSS expert, but I suspect the code that manages this is in one of the following snippets:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Tall Header Page */
  .tall-header-page .banner-wrap {
    display: table;
    width: 100%;
    min-height: 450px;
    padding-top: 50px;
    text-align: center;
  }
  .tall-header-page .banner-wrap .container {
    height: 450px;
  }
  .tall-header-page .banner-wrap .banner h2 {
    font-size: 70px;
    padding-top: 65px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>OR</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Banner */
  .banner-wrap {
    position: relative;
    max-width: 100%;
    height: auto;
    padding: 55px 0;
    box-sizing: border-box;
    background: #ffffff url('default-bg.jpg') center center no-repeat;
    background-size: cover;
  }
  .banner-wrap:before {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0);
    content: ' ';
  }
  .banner-wrap .container {
    display: table;
    overflow-y: hidden;
    height: 100%;
  }
  .banner-wrap .banner {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .banner-wrap .banner h2 {
    padding-bottom: 30px;
    color: #ffffff;
    word-spacing: .1em;
    text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif;
    font-size: 100px;
    font-weight: normal;
    line-height: 1.1em;
  }
  .banner-wrap .banner p {
    padding-bottom: 40px;
    color: #ffffff;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.4em;
  }
  .banner-wrap .banner .button-wrap {
    display: inline-block;
  }
  .banner-wrap .banner .wsite-button {
    text-align: center !important;
  }
  .banner-wrap .banner .wsite-button .wsite-button-inner {
    background: #ff8345;
    color: #ffffff !important;
  }
  .banner-wrap .banner .wsite-button:hover .wsite-button-inner {
    background: #e56525;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope someone can help. </p>
  
  <p>Thanks!</p>
  
  <p>UPDATE 2016-04-22</p>
  
  <p>tall-header.html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  &lt;/head&gt;
  
  &lt;body class='tall-header-page  wsite-theme-light'&gt;
  
    &lt;div class="wrapper"&gt;
     &lt;div class="paris-header"&gt;
        &lt;div class="container"&gt;
         &lt;label class="hamburger"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
         &lt;div class="logo"&gt;{logo}&lt;/div&gt;
          &lt;div class="nav desktop-nav"&gt;{menu}&lt;/div&gt;
        &lt;/div&gt;&lt;!-- end .container --&gt;
     &lt;/div&gt;&lt;!-- end .header --&gt;  
           
    &lt;div class="banner-wrap wsite-background"&gt;
     &lt;div class="container"&gt;
      &lt;div class="banner"&gt;
       &lt;h2&gt;{headline:text global="false"}&lt;/h2&gt;
       &lt;p&gt;{headline-paragraph:text global="false"}&lt;/p&gt; 
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="main-wrap"&gt;
       &lt;div class="container"&gt;
       &lt;div class="content-wrap"&gt;{content}&lt;/div&gt;
      &lt;/div&gt;&lt;!-- end container --&gt;
     &lt;/div&gt;
  
      &lt;div class="footer-wrap"&gt;
       &lt;div class="container"&gt;
        &lt;div class="footer"&gt;{footer}&lt;/div&gt;
       &lt;/div&gt;&lt;!-- end container --&gt;
      &lt;/div&gt;&lt;!-- end footer-wrap --&gt;
   &lt;/div&gt;
  
      &lt;div class="nav mobile-nav"&gt;
          &lt;label class="hamburger"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
          {menu}
      &lt;/div&gt;
  
   &lt;script type="text/javascript" src="/files/theme/plugins.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="/files/theme/custom.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>