title: how to stretch or fit a background image using css attribute background in a class
body: <p>How to stretch or fit a background image using css attribute <strong>background</strong> in a class. I am using a icon in li and want to fit on specific width. but it not render.</p>
  
  <p>HMTL code.</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li class="social-bg-facebook"&gt;F&lt;/li&gt;
     &lt;li class="social-bg-twitter"&gt;T&lt;/li&gt;
     &lt;li class="social-bg-user"&gt;U&lt;/li&gt;
     &lt;li&gt;UN&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>i am using these classes to fit background in <strong>li</strong></p>
  
  <p>CSS code.</p>
  
  <pre><code>.icon-list li {
      margin:0px;
      padding:0px;
      position: relative;
      top: -36px;
      left: 5px;
  
  }
  .icon-list li.social-bg-facebook {
      background:url(images/facebook.png) no-repeat;
      width:35px;
  }
  .icon-list li.social-bg-twitter {
      background:url(images/twitter-icon.png) no-repeat;
      width:35px;
  }
  </code></pre>