title: Twitter Bootstrap: Image positioning
body: <p>I am customizing my website using Twitter Bootstrap. I am trying to insert an image positioned as the top layer, is located slightly "outside of the container", and can responsively resize while staying proportionate / in relation to the other elements. I would like to use position: relative, but the image seems forced into a box within the container. When I use position: absolute, the image displays correctly at first on my web browser, but it does not behave as intended when the screen is resized. </p>
  
  <p>Can anyone help me figure out a good solution to this issue?</p>
  
  <p>HTML: I do not have the image contained within it's own , but is still located within the overall . Here's the code:</p>
  
  <pre><code>&lt;img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles"&gt;
  </code></pre>
  
  <p>CSS: Here's my custom css. </p>
  
  <pre><code>img#babee-bubbles {
  z-index: 100;
  position: relative;
  top: 51%;
  left: 7.5%;
  }
  </code></pre>
  
  <p>I'd appreciate any help finding a solution and/or help with my code / syntax. Thanks in advance.</p>