title: Positioning A Image Over A Div
body: <p>I'm using Twitter Bootstrap and I have the following div laid out with a music note that is supposed to be stretched out ontop of the div box and I'm not sure the correct properties to apply so that it matches my design composition.</p>
  
  <pre><code>&lt;div id="teachings" class="row important"&gt;
      &lt;div class="col-md-9"&gt;
          &lt;h2&gt;My Teachings&lt;/h2&gt;
          &lt;p&gt;Music is an art that encourages many different types of learning.  Through my lessons students will learn how to play flute and piano. Students will learn how to read and notate music so they can write music and be able to play or sing anything they wish.  They also learn about different cultures and people through the music that they play. They can use the time that they perform to build confidence in themselves. Some students may find that they enjoy music at a high level and wish to continue to use music in the rest of their lives, as a career or added to another career.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;img src="assets/images/music-note.png" alt="Music Note"&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  .important {
      background-color: #9999FF;
      padding: 30px;
      margin-top: 50px;
  }
  
  #teachings img {
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 1;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Et6TS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Et6TS.png" alt="Teachings"></a><a href="https://i.stack.imgur.com/qnPMs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qnPMs.png" alt="Design Comp"></a></p>