title: HTML ad CSS background positioning an icon
body: <p>I am working on my website, the thing is that I want to set an icon made purely by css as the background of te div "pagewrap", I can't seem to know to do it by myself so I would like you to help me out with this. I will post the link for a clearer view : <a href="http://i60.tinypic.com/312bc0p.png" rel="nofollow">http://i60.tinypic.com/312bc0p.png</a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link href="css/media-queries.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- ### Page Wrap ### --&gt;
  &lt;div id="pagewrap"&gt; 
  
          &lt;!-- ### Logo Bar ### --&gt;
          &lt;div id="logoBar"&gt;  
              &lt;div class="helper"&gt;        
                  &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div style="clear:both;"&gt;&lt;/div&gt;  
          &lt;!-- ### Home Icon ### --&gt;
          &lt;div class="icon"&gt;
          &lt;div class="home"&gt;&lt;/div&gt;
          &lt;div class="chimney"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- ### Side Bar ### --&gt;
          &lt;div id="sidebar"&gt;
              &lt;div class="widget"&gt;
                  &lt;ul&gt; 
                    &lt;li style="border-top:0 !important;"&gt;&lt;a href=""&gt;Acceuil&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Identification&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Mon Parcours&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Ma Formation&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Mes Projets&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Dossier de Veille&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Contact Me&lt;/a&gt;&lt;/li&gt; 
                  &lt;/ul&gt;   
              &lt;/div&gt;                  
          &lt;/div&gt;
  
          &lt;!-- ### Content ### --&gt;
          &lt;div class="contenu"&gt;
              &lt;div class="post clearfix"&gt;                     
                      &lt;h1 class="post-title"&gt;&lt;a href="#"&gt;Acceuil&lt;/a&gt;&lt;/h1&gt;                         
                  &lt;br/&gt;&lt;p&gt;Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.&lt;/p&gt;         
          &lt;/div&gt;
  &lt;/div&gt;      
  &lt;/div&gt;          
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>/************************************************************************************
  STRUCTURE
  *************************************************************************************/
  #pagewrap {
      width: 1000px;
      margin: 0 auto;
      background:#3c3c3c;
      height:100vh;
      min-height:610px;
  
      /*SHADOW*/
      -webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
      -moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
      box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
  }
  
  /* Home */
  div.icon div.home {
      height: 0px;
      width: 0px;
      border-width: 16px;
      border-style: solid;
      border-color: transparent transparent #333 transparent;
      position: absolute;
      bottom: 16px;
      left: 0;
  }
  
  div.icon div.home:after {
      content: '';
      width: 5px;
      height: 16px;
      background-color: transparent;
      position: absolute;
      top: 16px;
      right: -11px;
      border-left: 8px solid #333;
      border-right: 8px solid #333;
  }
  
  div.icon div.home:before {
      content: '';
      width: 9px;
      height: 6px;
      background-color: #333;
      position: absolute;
      top: 16px;
      right: -5px;
  }
  
  div.icon div.chimney {
      width: 4px;
      height: 10px;
      background: #333;
      position: absolute;
      right: 6px;
      top: 3px;
  }
  
  
  /************************************************************************************
  MENU
  *************************************************************************************/
  
  
  
  /**Side Bar**/
  #sidebar {
      width: 250px;
      margin: 10px 30px 0 24px;
  }
  .widget {
      background: #f5f5f5;
      margin: 0 0 30px;
      padding: 10px 20px;
      /* rounded corner */
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      /* box shadow */
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
      -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
      box-shadow: 0 1px 3px rgba(0,0,0,.4);
  }
  .widget ul {
      margin: 0;
      padding: 0;
  }
  .widget li {
      margin: 0;
      padding: 12px 0;
      list-style: none;
      clear: both;    
      border-top: solid 1px black;
  }
  .widget ul li a{
      font-family:stainy;
      font-size:21pt;
      color:#303438;
  }
  .widget ul li a:hover{
      text-decoration: none;
      outline: none;
      color:#30c9e0;
      font-size:22pt;
  }
  .widgettitle{
      font-family:stainy;
      font-size:20pt;
  
  }
  </code></pre>