title: Image Disappears When Re-sizing In CSS
body: <p>I am a graphic designer trying to code a website. I am stuck on the homepage and have been for weeks. My problem is that I can't get an image to re-size with CSS because it disappears or gets cut off. Here is what I am trying to <a href="http://i61.tinypic.com/sc7xhk.jpg" rel="nofollow">do</a></p>
  
  <p>Here is my code:</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>#wrapper {
          position: relative;
  }
  
  #wrapper &gt; div {
          border-radius: 50%;
          width: 960px;
          height: 100%;
          overflow: hidden;
          margin: auto;
          position: relative;
  }
  
  #wrapper &gt; div#home {
          width: 291px;
          height: 290px;
          position: absolute;
          -ms-transform: translate(-50%,-50%); /* IE 9 */
          -webkit-transform: translate(-50%,-50%); /* Safari */
          transform: translate(-50%,-50%);
          -moz-transform: translate(-50%,-50%);
  }
  
  #wrapper &gt; div#contact {
          width: 291px;
          height: 290px;
          position: absolute;
          -ms-transform: translate(-50%,-50%); /* IE 9 */
          -webkit-transform: translate(-50%,-50%); /* Safari */
          transform: translate(-50%,-50%);
          -moz-transform: translate(-50%,-50%);
          margin-left: -150px;
          margin-top: 180px;
          
  }
  
  #wrapper &gt; div#contact img {
          width: 60%;
          height: auto;
          
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But with that code I get <a href="http://i60.tinypic.com/90wqv8.png" rel="nofollow">this</a></p>
  
  <p>If you look at the contactbttn (Phone icon) you can see the glowing edge is cut off.</p>