title: hiding image background
body: <p>I have the following css and html. I'm trying to hide the background of an image so that you just see the image without its surrounding white space. Note: I'm a noobie with css so please be gentle. lol</p>
  
     <pre> <code>
  .boxcontainer {
      font-size: 12px;
      position: absolute;
      left: 100px;
      top: 20px;
      width: 300px;
      z-index: 1000;
  }
  
  .boxwithicon 
  {
      background: transparent;
      background-position: 5px 10px;
      background-repeat: no-repeat;
      padding-left: 50px;
  }
  
  .boxstatus {
      -moz-border-radius: 10px 10px 10px 10px;
      background-color: rgba(0, 0, 0, 0.4);
      border: 3px solid #000000;
      color: #FFFFFF;
      /*margin-bottom: 5px; */
      padding: 15px;
      position: relative;
  
  }
  
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="boxcontainer"&gt;
  &lt;div id="head1" &gt;&lt;b&gt;&lt;u&gt;Test&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;div class="boxstatus boxwithicon"&gt;
  &lt;img src="images/smrsfolderopen.png" alt=""&gt;&lt;a href="http://localserver/page"&gt;Customers&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So what I'm getting is my image with white background showing in image block. Just like with any image you have white space around actual image. I don't want that to show up. Hopefully i'm explaining this properly.</p>
  
  <p>-DND</p>
  
  <p>I think we are all on the same page. Now when i explorer other websites that use images they do have white backgrounds as well when I check out the image itself but when displayed on website its transparent. For instance check out this site: <a href="http://labs.d-xp.com/growl/" rel="nofollow">link text</a> and click on Simple Example button. you will see icon next to text in box. How are they making the white background be transparent?</p>
  
  <p>Thanks</p>