title: Why isn't my background image showing up?
body: <p>I can't understand why my background image isn't showing up when I use the <code>background-image</code> property. It will not show up if I try to use it in a <code>list-style-image</code> property either. It <em>will</em> show up if I use it in an <code>img</code> element, but I don't want to do that. I can't figure out why it isn't showing up.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;ul class="contact"&gt;
      &lt;li id="phone"&gt;&lt;a href="tel:1234567890"&gt;(123) 456-7890&lt;/a&gt;&lt;/li&gt;
      &lt;li id="email"&gt;&lt;a href="mailto:example@email.com" target="_blank"&gt;example@email.com&lt;/a&gt;&lt;/li&gt;
      &lt;li id="facebook"&gt;&lt;a href="#" target="_blank"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>ul.contact {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 35px;
  }
  
  .contact li {
      background-image: url('img/phone.png');
      background-size: 2%;
      background-repeat: no-repeat;
      background-position: left;
  }
  </code></pre>