0

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;
}
Michael
  • 93
  • 1
  • 9
  • 2
    This might be the problem: Partial URLs are interpreted relative to the source of the style sheet, not relative to the document. Source: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to – reuelab Sep 15 '14 at 02:05
  • You are correct! That's what I was doing wrong! – Michael Sep 15 '14 at 03:36

1 Answers1

0

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.

DotNet NF
  • 805
  • 1
  • 6
  • 14
  • 1
    Ah, you're right, thanks. I know what I did wrong now. The CSS file is in a folder of its own, so I had to link it like `background-image: url('../img/phone.png');` – Michael Sep 15 '14 at 03:35
  • No problem! I'm glad you figured out the issue, good luck on your future projects! : ) – DotNet NF Sep 15 '14 at 03:56