title: How to stick image to border of div?
body: <p>I am struggling with this, as positioning an image to the top of a div is pretty easy but doing it at the bottom of the div is not that easy. As you can see, that rectangle is a div with an image frame on top of it.</p>
  
  <p>I want to put another frame at the bottom of that div so it looks nicer but I can only get to position it inside the div, but not over the border. </p>
  
  <p>Check this image to see what  I mean: </p>
  
  <p><img src="https://i.stack.imgur.com/wVdgd.png" alt="Stick image to border"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;
  
      &lt;div id="banner"&gt;
      &lt;img src="img/darkframe.png"&gt;
      &lt;img src="img/darkframe2.png"&gt;
  
  
      &lt;/div&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code> * {
      margin: 0;
      padding: 0;
  }
  html {
      overflow-y: scroll;
  }
  body {
      background-image: url("/img/poe-wallpaper-5.jpg");
      font-size: 13px;
      color: #938063;
      font-family: Fontin-Bold;
      background-repeat: no-repeat;
      /*background-position: right top;*/
      background-attachment: scroll;
      background-position: center top;
      background-color: black;
  }
  ol, ul {
      list-style: none;
      margin: 0;
  }
  ul li {
      margin: 0;
      padding: 0;
  }
  h1 {
      margin-bottom: 10px;
      color: #111111;
  }
  a, img {
      outline: none;
      border: none;
      color: #000;
      font-weight: bold;
      text-transform: uppercase;
  }
  p {
      margin: 0 0 10px;
      line-height: 1.4em;
      font-size: 1.2em;
  }
  img {
      display: block;
      margin-bottom: 10px;
  }
  aside {
      font-style: italic;
      font-size: 0.9em;
  }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, {
  display: block;
  }
  
  /* Structure */
  #wrapper {
      width: 96%;
      max-width: 920px;
      margin: auto;
      padding: 5%;
  }
  
  #main {
      padding-top: 10px;
      width: 100%;
      margin-right: 5%;
      float: left;
  }
  
  aside {
      width: 35%;
      float: right;
  }
  
  /* Logo H1
   header h1 {
   height: 70px;
   width: 160px;
   float: left;
   display: block;
   background: url(../images/demo.gif) 0 0 no-repeat;
   text-indent: -9999px;
   }*/
  
  #skipTo {
      display: none;
  }
  #skipTo li {
      background: #b1fffc;
  }
  
  /* Banner */
  #banner {
  
      float: none;
      margin:90px 0 100px 0;
      width: 100%;
      border: 1px solid #938063;
      background-color: #1a1b18;
      position: relative;
      padding-top: 25px;
      padding-bottom: 85px;
      border-radius: 10px;
  
  
  }   
  
  #banner h1 {
      font-family: 'fontinbold';
      font-weight: bold;
      text-align: center;
      font-size: 350%;
      color: #938063;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 30px;
  }
  #banner h2 {
      font-family: 'fontinbold';
      font-weight: bold;
      text-align: center;
      font-size: 350%;
      color: #938063;
      margin-left: 10px;
      margin-right: 10px;
  }
  #banner h3 {
      font-family: 'fontinbold';
      font-weight: bold;
      text-align: center;
      font-size: 350%;
      color: #938063;
      margin-left: 10px;
      margin-right: 10px;
  }
  #banner img[src="img/darkframe.png"] {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: -47px;
      height: 80px;
      width: 1000px;
  }
  #banner img[src="img/darkframe2.png"] {
      position: absolute;
      height: auto;
      width: 100%;
      bottom:
  }
  
  /* Media Queries */
  @media screen and (max-width: 480px) {
  
      #skipTo {
          display: block;
      }
  
      header nav, #main, aside {
          float: left;
          clear: left;
          margin: 0 0 10px;
          width: 100%;
      }
      header nav li {
          margin: 0;
          background: #efefef;
          display: block;
          margin-bottom: 3px;
      }
      header nav a {
          display: block;
          padding: 10px;
          text-align: center;
      }
  }
  
  #talk2 {
      float: none;
      width: 100%;
      margin: 0 auto;
      border: 1px solid #938063;
      background-color: #1a1b18;
      position: relative;
      margin-bottom: 50px;
      border-radius: 10px;
  }
  
  #talk2 img[src="img/darkframe.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      top: -77px;
      height: 80px;
      width: 100%;
      padding-top: 25px;
  }
  
  #talk2 img[src="img/exastashfull.jpg"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 250px;
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 100px;
  }
  #talk2 img[src="img/iknow.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 80px;
      width: 220px;
      margin-left: auto;
      margin-right: auto;
  }
  #talk2 img[src="img/sowhat.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 80px;
      width: 220px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 80px;
  }
  #talk2 img[src="img/then.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 80px;
      width: 220px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 80px;
  }
  
  #talk2 img[src="img/getnow.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 100px;
      width: 500px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 80px;
  }
  #talk2 img[src="img/buynowred.png"] {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 120px;
      width: 250px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 40px;
  }
  
  #talk2 p {
  
      font-family: 'fontinbold';
      text-align: center;
      font-size: 22px;
      color: #938063;
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 40px;
      margin-bottom: 30px;
  }
  
  #formdiv {
      width: 100%;
      margin 0: auto;
      text-align: center;
  }
  
  #stash img {
      position: relative;
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>