title: How to add image to banner and have its position adjust to changing screen width
body: <p>I am trying to add a photo to the banner and have it sit right above my logo on my webpage. I would like the photo to stay in the same position (over the logo) regardless of screen size, right now it stays in the same position within the banner. How do i fix this?</p>
  
  <p>My current code looks like this </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>div#banner {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00AD83;
    width: 100%;
    height: 100px;
  }
  div#banner-content {
    position: static;
    margin-left: 25%;
    padding: 0px;
    z-index: 1;
  }
  div#main-content {
    padding-top: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner"&gt;
    &lt;div id="banner-content"&gt;
      &lt;img src="/img/Banner-Words.jpg" alt="URGENT APPEAL" style="width:349px;height:100px;"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>