Why isn't my background image showing up?

Question

I can't understand why my background image isn't showing up when I use the background-image property. It will not show up if I try to use it in a list-style-image property either. It will show up if I use it in an img element, but I don't want to do that. I can't figure out why it isn't showing up.

Here is my HTML:

<ul class="contact">
    <li id="phone"><a href="tel:1234567890">(123) 456-7890</a></li>
    <li id="email"><a href="mailto:example@email.com" target="_blank">example@email.com</a></li>
    <li id="facebook"><a href="#" target="_blank">Facebook</a></li>
</ul>

Here is my CSS:

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;
}

Answer 1

I'm fairly sure your URL is wrong, I copied your code and just placed a random image url I found on imgur and it worked

background-image: url('http://i.imgur.com/oSNkApR.jpg');

try this and tell us if it works

background-image: url('/img/phone.png');

Or if you are using ASP perhaps try this

background-image: url('../ContentFolder/img/phone.png');

let us know how you go.